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