github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

优化表格代码

pull/198/head
linxin 2019-08-17 14:41:53 +08:00
parent 3dd0b2fd8a
commit 2cb246ec3e
1 changed files with 37 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
src/components/page/BaseTable.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="table"> <div>
<div class="crumbs"> <div class="crumbs">
<el-breadcrumb separator="/"> <el-breadcrumb separator="/">
<el-breadcrumb-item> <el-breadcrumb-item>
@ -13,14 +13,14 @@
type="primary" type="primary"
icon="el-icon-delete" icon="el-icon-delete"
class="handle-del mr10" class="handle-del mr10"
@click="delAll" @click="delAllSelection"
>批量删除</el-button> >批量删除</el-button>
<el-select v-model="select_cate" placeholder="筛选省份" class="handle-select mr10"> <el-select v-model="selectCate" placeholder="筛选省份" class="handle-select mr10">
<el-option key="1" label="广东省" value="广东省"></el-option> <el-option key="1" label="广东省" value="广东省"></el-option>
<el-option key="2" label="湖南省" value="湖南省"></el-option> <el-option key="2" label="湖南省" value="湖南省"></el-option>
</el-select> </el-select>
<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input> <el-input v-model="selectWord" placeholder="筛选关键词" class="handle-input mr10"></el-input>
<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button> <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</div> </div>
<el-table <el-table
:data="data" :data="data"
@ -78,7 +78,7 @@
:current-page="page.index" :current-page="page.index"
:page-size="page.size" :page-size="page.size"
:total="page.total" :total="page.total"
@current-change="handleCurrentChange" @current-change="handlePageChange"
></el-pagination> ></el-pagination>
</div> </div>
</div> </div>
@ -108,18 +108,17 @@ export default {
data() { data() {
return { return {
tableData: [], tableData: [],
cur_page: 1,
multipleSelection: [], multipleSelection: [],
select_cate: '', delList: [],
select_word: '', selectCate: '',
del_list: [], selectWord: '',
editVisible: false, editVisible: false,
form: {},
page: { page: {
index: 1, index: 1,
size: 10, size: 10,
total: 50 total: 50
}, },
form: {},
idx: -1, idx: -1,
id: -1 id: -1
}; };
@ -131,16 +130,16 @@ export default {
data() { data() {
return this.tableData.filter(d => { return this.tableData.filter(d => {
let is_del = false; let is_del = false;
for (let i = 0; i < this.del_list.length; i++) { for (let i = 0; i < this.delList.length; i++) {
if (d.name === this.del_list[i].name) { if (d.name === this.delList[i].name) {
is_del = true; is_del = true;
break; break;
} }
} }
if (!is_del) { if (!is_del) {
if ( if (
d.address.indexOf(this.select_cate) > -1 && d.address.indexOf(this.selectCate) > -1 &&
(d.name.indexOf(this.select_word) > -1 || d.address.indexOf(this.select_word) > -1) (d.name.indexOf(this.selectWord) > -1 || d.address.indexOf(this.selectWord) > -1)
) { ) {
return d; return d;
} }
@ -149,26 +148,17 @@ export default {
} }
}, },
methods: { methods: {
// 分页导航
handleCurrentChange(val) {
this.cur_page = val;
this.getData();
},
// 获取 easy-mock 的模拟数据 // 获取 easy-mock 的模拟数据
getData() { getData() {
fetchData({ fetchData({
page: this.cur_page page: this.page.index
}).then(res => { }).then(res => {
this.tableData = res.list; this.tableData = res.list;
}); });
}, },
search() {}, // 触发搜索按钮
handleEdit(index, row) { handleSearch() {},
this.idx = index; // 删除操作
this.id = row.id;
this.form = row;
this.editVisible = true;
},
handleDelete(index, row) { handleDelete(index, row) {
// 二次确认删除 // 二次确认删除
this.$confirm('确定要删除吗？', '提示', { this.$confirm('确定要删除吗？', '提示', {
@ -176,46 +166,41 @@ export default {
}) })
.then(() => { .then(() => {
this.$message.success('删除成功'); this.$message.success('删除成功');
if (this.tableData[index].id === row.id) { this.tableData.splice(index, 1);
this.tableData.splice(index, 1);
} else {
for (let i = 0; i < this.tableData.length; i++) {
if (this.tableData[i].id === row.id) {
this.tableData.splice(i, 1);
return;
}
}
}
}) })
.catch(() => {}); .catch(() => {});
}, },
delAll() { // 多选操作
handleSelectionChange(val) {
this.multipleSelection = val;
},
delAllSelection() {
const length = this.multipleSelection.length; const length = this.multipleSelection.length;
let str = ''; let str = '';
this.del_list = this.del_list.concat(this.multipleSelection); this.delList = this.delList.concat(this.multipleSelection);
for (let i = 0; i < length; i++) { for (let i = 0; i < length; i++) {
str += this.multipleSelection[i].name + ' '; str += this.multipleSelection[i].name + ' ';
} }
this.$message.error(`删除了${str}`); this.$message.error(`删除了${str}`);
this.multipleSelection = []; this.multipleSelection = [];
}, },
handleSelectionChange(val) { // 编辑操作
this.multipleSelection = val; handleEdit(index, row) {
this.idx = index;
this.id = row.id;
this.form = row;
this.editVisible = true;
}, },
// 保存编辑 // 保存编辑
saveEdit() { saveEdit() {
this.editVisible = false; this.editVisible = false;
this.$message.success(`修改第 ${this.idx + 1} 行成功`); this.$message.success(`修改第 ${this.idx + 1} 行成功`);
if (this.tableData[this.idx].id === this.id) { this.$set(this.tableData, this.idx, this.form);
this.$set(this.tableData, this.idx, this.form); },
} else { // 分页导航
for (let i = 0; i < this.tableData.length; i++) { handlePageChange(val) {
if (this.tableData[i].id === this.id) { this.page.index = val;
this.$set(this.tableData, i, this.form); this.getData();
return;
}
}
}
} }
} }
}; };
@ -234,10 +219,6 @@ export default {
width: 300px; width: 300px;
display: inline-block; display: inline-block;
} }
.del-dialog-cnt {
font-size: 16px;
text-align: center;
}
.table { .table {
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;