element table批量删除

很小的一个问题,但是有细节需要注意

(1)问题:在起初我写的时候是根据元素的name是否相同判断是否是同一个节点,出现的问题就是,如果说两个元素的name相同,就会判断出错

(2)代码:

<template>
<div class="main">
<div style="margin-top: 20px">
<el-button @click="handleDelete()" type="danger">批量删除</el-button>
</div>
<template>
<el-table
class="mytable"
:data="tableData"
stripe
style="width: 50%"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
</div>
</template>
<script>
export default {
data() {
return {
selectedData: [],
tableData: [
{
date: "2016-05-03",
name: "王小虎1",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-03",
name: "王小虎1",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-02",
name: "王小虎2",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
},
{
date: "2016-05-04",
name: "王小虎3",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
zip: 200333
}
]
};
},
methods: {
deleteRow(index, rows) {
rows.splice(index, 1);
},
handleSelectionChange(data) {
this.selectedData = data;
},
handleDelete() {
var that = this;
var val = this.selectedData;
if (val) {
val.forEach(function(item, index) {
that.tableData.forEach(function(itemI, indexI) {
if (item === itemI) {
that.tableData.splice(indexI, 1);
}
});
});
}
this.$refs.multipleTable.clearSelection();
}
}
};
</script>
<style scoped>
.main {
padding: 40px;
}
.mytable {
margin-top: 15px;
}
</style>

element table批量删除

上一篇:字典:当索引不好用时2 - 零基础入门学习Python026


下一篇:使用vue与element组件