<template>
<div class="item">
<el-button class="iconfont" type="success" size="small" @click="addRow"> 新增</el-button>
<el-button type="primary" class="iconfont" size="small" @click="removeUsers()">批量删除</el-button>
</div>
<div>
<el-table :data="tableData" stripe border style="width:100%" highlight-current-row @selection-change="selsChange">
<el-table-column type="selection" width="55"> </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-column label="操作" align="center" min-width="100">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleEdit(scope.$index,scope.row)">处理</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index,tableData)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
selsChange: function (val) { //点击选中
console.log(val); 勾选中的某一行数据
this.selected = val;
},
//批量删除
removeUsers() {
var val = this.selected
var that = this //必须把this改成that
this.$confirm('此操作将永久删除 ' + this.selected.length + ' 个用户, 是否继续?', '提示', {
type: 'warning'
})
.then(() => {
// console.log(this.selected, 1);
if (val) {
val.forEach(function (item, index) {
that.tableData.forEach(function (itemI, indexI) {
if (item.name === itemI.name) { // 判断选中数据跟元数据某一条标识相等,删除对应的源数据
that.tableData.splice(indexI, 1)
}
})
})
}
this.$message.success('删除了成功');
.catch(() => {
this.$Message('已取消操作!');
});
},
}
</script>
vue+element实现表格批量删除功能
最新推荐文章于 2024-04-27 13:27:05 发布