【vue】element实现table的增加行和批量删除行功能

<template>
<div id="app">
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">

<el-button @click="delMulData()">批量删除</el-button>
<el-button @click="addData()">增加数据</el-button>
</div>
</div>

</template>

<script>
export default {
name: 'app',
data() {
return {
tableData3: [{
rowNum:1,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
rowNum:2,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
rowNum:3,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
rowNum:4,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
rowNum:5,
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
rowNum:6,
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
rowNum:7,
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},

methods: {
//正常情况下是需要弹出一个dialog输入数据的，这里我们只是模拟一下实现方法
//注意因为我们添加的是固定rowNum，所以批量删除的时候新增的会一样，正式代码中不会存在类似情况
addData(){
var data={
romNum:100,
date:'2018-12-3',
name:'当白',
address:'郑州市二七区'
}
this.tableData3.unshift(data)

},



delMulData(){
//拿到选中的数据
let val = this.multipleSelection
//如果选中数据存在
if(val){
//将选中数据遍历
val.forEach((val,index) =>{
//遍历源数据
this.tableData3.forEach((v,i)=>{
//如果选中数据和源数据的某一条唯一标识符相等，删除对应的源数据
if(val.rowNum === v.rowNum){
this.tableData3.splice(i,1)
}
})
})
}
//清除选中状态
this.$refs.multipleTable.clearSelection()

},


//得到选中数据
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>

————————————————
版权声明：本文为CSDN博主「当白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dangbai01_/article/details/83745714

标签：vue,name,王小虎,普陀区,element,address,date,table,rowNum
来源： https://www.cnblogs.com/javalinux/p/15631895.html