批量删除
取消选择
:data="tableData"
ref="multipleTable"
style="width: 100%"
max-height="250"
@selection-change="handleSelectionChange">
type="selection"
width="55">
fixed
prop="date"
label="日期"
width="150">
prop="name"
label="姓名"
width="120">
prop="province"
label="省份"
width="120">
prop="city"
label="市区"
width="120">
prop="address"
label="地址"
width="300">
prop="zip"
label="邮编"
width="120">
fixed="right"
label="操作"
width="120">
@click.native.prevent="deleteRow(scope.$index, tableData)"
type="text"
size="small">
移除
export default {
data () {
return {
tableDataAmount: [],
tableData: [{
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.tableDataAmount = data
},
// 批量清除
delArray () {
var that = this
// 拿到选中的数据;
var val = this.tableDataAmount
// 如果选中数据存在
if (val) {
// 将选中数据遍历
val.forEach(function (item, index) {
// 遍历源数据
that.tableData.forEach(function (itemI, indexI) {
// 如果选中数据跟元数据某一条标识相等,删除对应的源数据
if (item.name === itemI.name) {
that.tableData.splice(indexI, 1)
}
})
})
}
// 清除选中状态
this.$refs.multipleTable.clearSelection()
}
}
}