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