【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