table.vue:
<template>
<div>
<el-card>
<el-row :style="{marginBottom: '15px'}">
<el-col :span="24">
<el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
<el-button type="primary" size="small" icon="el-icon-minus" @click="deleteArticle">删除</el-button>
<el-input
:style="{width: '300px', float: 'right'}"
placeholder="搜索"
v-model="searchText"
suffix-icon="el-icon-search"
@change="searchArticle"
:clearable="true"
></el-input>
</el-col>
</el-row>
<el-table :data="tableData" style="width: 100%" v-loading="loading" ref="articleTable">
<el-table-column type="selection" width="45"></el-table-column>
<el-table-column prop="id" label="ID" width="50"></el-table-column>
<el-table-column prop="title" label="标题" width="400"></el-table-column>
<el-table-column prop="content" label="内容" :formatter="formatterContent"></el-table-column>
<el-table-column label="状态" width="200">
<template slot-scope="scope">
<el-progress :percentage="Math.ceil(Math.random()*100)" color="#5cb87a"></el-progress>
</template>
</el-table-column>
<el-table-column label="编辑" width="100">
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-edit"
type="primary"
@click="editArticle(scope.row)"
></el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[5, 10, 20, 30, 50]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
:style="{marginTop: '20px'}"
></el-pagination>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
loading: true,
currentPage: 1,
pageSize: 5,
total: 0,
tableData: [],
searchText: "",
};
},
methods: {
formatterContent(row, column) {
return row.content.substring(0, 60) + "...";
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.pageSize = val;
this.getData(this.currentPage, val);
},
handleCurrentChange(val) {
console.log(`当前页: ${val}`);
this.currentPage = val;
this.getData(val, this.pageSize);
},
getData(pageNumber, pageSize) {
this.loading = true;
this.$axios
.get(
`http://localhost:5555/api/blog_list/?pageSize=${pageSize}&pageNumber=${pageNumber}&sortName=id&sortOrder=desc`
)
.then(
resp => {
console.log(resp);
this.loading = false;
let ajaxData = [];
for (let i = 0; i < resp.data.rows.length; i++) {
ajaxData.push({
key: resp.data.rows[i].id,
id: resp.data.rows[i].id,
title: resp.data.rows[i].title,
content: resp.data.rows[i].content
});
}
this.tableData = ajaxData;
this.total = resp.data.total;
},
err => {
this.loading = false;
console.log(err);
}
);
},
deleteArticle() {
// 删除文章
let _this = this;
let selection = this.$refs.articleTable.selection;
let len = selection.length;
let idArr = [];
for (let i = 0; i < len; i++) {
idArr.push(selection[i].id);
}
if (len === 0) {
this.$notify.error({
title: "错误提示",
message: "请选择要删除的文章!"
});
} else {
this.$axios
.post("/api/article/delete/", {
ids: idArr
})
.then(res => {
if (res.data.ret) {
_this.$notify.success({
title: "成功提示",
message: "文章删除成功!"
});
this.getData(1, 5);
console.log(res);
} else {
_this.$notify.success({
|