当前位置：首页 > news >正文

el-table多选表格实现默认选中删除选中列表取消勾选等联动效果

news 来源：原创 2024/5/21 0:58:10

实现效果如下：
在这里插入图片描述
代码如下：

<template><div><el-tableref="multipleTable":data="tableData"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.id }}</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><p v-for="(item, index) of multipleSelection" :key="index">{{ item.name }}<span @click="delect(item, index)">删除</span></p></div></div>
</template>
<script>
export default {name: "HomeIndex",components: {},data() {return {tableData: [],multipleSelection: [],};},created() {this.allCheck();},mounted() {},methods: {allCheck() {this.tableData = [{id: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-08",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-06",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-07",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},];this.multipleTable = [{id: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-08",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{id: "2016-05-06",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},];let checkedId = [];for (let item of this.multipleTable) {checkedId.push(item.id);}this.$nextTick(() => {for (let key in this.tableData) {if (checkedId.indexOf(this.tableData[key]["id"]) !== -1) {this.$refs.multipleTable.toggleRowSelection(this.tableData[key],true);}}});},handleSelectionChange(val) {this.multipleSelection = val;},delect(item, index) {this.$refs.multipleTable.toggleRowSelection(this.tableData.find((ite) => ite.id == item.id),false);},},
};
</script>
<style   scoped>
</style>