vueelement实现table的增加行和批量删除行功能

Posted 2021-12-03 hellodev

 

 

<template>
<div id="app">
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
>
</el-table-column>
<el-table-column
label="日期"
>
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
>
</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