ElementUi Table复选框回显

1. <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
2.    <el-table-column type="selection" width="55" :reserve-selection="true" show-overflow-tooltip>
3.    </el-table-column>
4.    <el-table-column prop="name" label="Name"></el-table-column>
5.    <el-table-column prop="age" label="Age"></el-table-column>
6.    <el-button @click="toggleSelection">Toggle Selection</el-button>
7. </el-table>

复制代码

1. <script>
2. export default {
3.   data() {
4.     return {
5.       tableData: [
6.         { id: 1, name: 'John', age: 30 },
7.         { id: 2, name: 'Doe', age: 25 },
8.         { id: 3, name: 'Smith', age: 35 }
9.       ]
10.     };
11.   },
12.   methods: {
13.     toggleSelection() {
14.       const rowToToggle = this.tableData[0]; // 假设切换第一行的选中状态
15.       const selected = !rowToToggle.selected; // 切换选中状态
16.       this.$refs.multipleTable.toggleRowSelection(rowToToggle, selected);
17.     }
18.   }
19. };
20. </script>

复制代码

如果想要在初始化的时候就默认勾选，必要用到this.$nextTick，可以确保在 DOM 更新后执行，以便正确设置初始的选中状态。否则直接用的话报错Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'toggleRowSelection')"

1. mounted() {
2.   // 模拟初始化时默认勾选第一行和第二行
3.   this.$nextTick(() => {
4.     this.$refs.multipleTable.toggleRowSelection(this.tableData[0], true);
5.     this.$refs.multipleTable.toggleRowSelection(this.tableData[1], true);
6. });
7. }

复制代码

监听了selection-change变乱，想要在手动勾选的时候执行某些操作

1. handleSelectionChange(vals) {
2.         console.log(vals)
3. }

复制代码

会发现，初始化的时候由于执行了this.$refs.multipleTable.toggleRowSelection方法，导致selection-change也会主动触发。现实中要想把这两者分开来，可以加一个标识字init来区分。

1. <script>
2. export default {
3.   data() {
4.     return {
5.       tableData: [
6.         { id: 1, name: 'John', age: 30 },
7.         { id: 2, name: 'Doe', age: 25 },
8.         { id: 3, name: 'Smith', age: 35 }
9.       ],
10.       init: true
11.     };
12.   },
13.   mounted() {
14.     this.tableData = this.tableData.map((v, vIndex) => {
15.         ...
16.         that.$nextTick(() => {
17.           that.$refs.multipleTable.toggleRowSelection(v, true);
18.           if (...) { // 初始化执行完时的判断条件
19.             setTimeout(() => {
20.               that.init = false
21.            }, 0)
22.          }
23.         })
24.   },
25.   methods: {
26.     handleSelectionChange(vals) {
27.            console.log(vals)
28.            if(this.init) {
29.                     console.log('初始化时触发的')
30.            } else {
31.                    console.log('手动勾选时触发的')
32.            }
33.     }
34.   }
35. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。