element树形表格懒加载勾选问题解决方案

element树形表格懒加载勾选问题解决方案

需求描述

公司项目有一个element的树型表格展示数据，现在需要加入一个勾选功能（层级为3）

问题分析

直接使用elemnt的勾选列，可以实现第一层级，但是第二级之后的都不支持勾选，问题就出现了，全选功能只跟第一级挂钩，哪怕我们用this.$refs.mulTable.store.states.lazyTreeNodeMap来给第二、第三层做勾选，但是不具备半选的能力，因此，这里我们需要用自定义列的方式来定义勾选列

<el-table-column type="" min-width="5%">
   <template slot="header" slot-scope="scope">
       <el-checkbox :class="[{ 'half-select': halfSelect }]" v-model="checkouts" @change="checkAllIn(scope)" />
   </template>
   <template slot-scope="scope">
       <el-checkbox :class="[{ 'half-select': scope.row.halfSelect }]" v-model="scope.row.checks" @change="checkChange(scope)" />
   </template>
</el-table-column>

这样子列的勾选我们就可以通过监听来判断是属于第几层（可以在获取数据的时候添加层级标记，和父级对应关系标记，方便找到上一级）

1. 第一级的数据在table绑定的对象中
2. 第二级之后的懒加载数据在表格的this.$refs.mulTable.store.states.lazyTreeNodeMap中，存储在改对象对应其row-key的键值下，通过this.$refs.mulTable.store.states.lazyTreeNodeMap[row-key]可以获取，比如row-key绑定的是id，则通过父级id，this.$refs.mulTable.store.states.lazyTreeNodeMap[父级id]即可得到对应下一级的数据，如图是修改非第一级的修改
   
3. 在自定义列时，我们把每一行勾选的值双向绑定到改行的checks属性上，因此我们直接通过js去改变某一行的checks值就可以达到改变勾选状态
4. 每一次值改变，我们都可以根据当前变化的行去获取其父节点直到第一层，也可以根据row-key去获取子节点，然后拿到对应的数据去改变子节点和父级节点的状态

总结

整体实现思路如上面所描述，可以根据这个思路去实现，难度不大，需要一定的思绪，由于是项目代码就补贴出来全部了

ps：如果有疑问可以评论或者私信询问
ps：element树形表格数据问题文章可以看这边篇文章https://blog.csdn.net/ta_huang/article/details/124631705