<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>