<template>
<div>
<div style="display: flex; margin-bottom: 20px">
<div v-for="item in checklist" :key="item.id" @click="del([item])">
{{ item.name }}
</div>
</div>
<el-table :data="tableData" ref="singleTable" highlight-current-row border class="load_table"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="70"></el-table-column>
<el-table-column prop="id" min-width="100%" label="" align="center"></el-table-column>
<el-table-column prop="name" min-width="100%" align="center"></el-table-column>
<el-table-column prop="school" min-width="100%" align="center"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
checklist: [],
tableData: [{
id: 1,
name: "123",
school: "学校",
},
{
id: 2,
name: "张三",
school: "学校",
},
{
id: 3,
name: "李四",
school: "学校",
},
{
id: 4,
name: "王五",
school: "学校",
},
{
id: 6,
name: "张六",
school: "学校",
},
{
id: 7,
name: "刘⑦",
school: "学校",
},
],
};
},
mounted() {},
methods: {
/**
* 取消选中
*/
del(rows) {
rows.forEach((row) => {
this.$refs.singleTable.toggleRowSelection(row);
});
},
handleSelectionChange(val) {
this.checklist = val;
},
},
};
</script>
<style lang="scss" scoped>
</style>
|