关于前端:element树形表格懒加载勾选问题解决方案

1次阅读

共计 1226 个字符，预计需要花费 4 分钟才能阅读完成。

公司我的项目有一个 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>

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

第一级的数据在 table 绑定的对象中
第二级之后的懒加载数据在表格的 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]即可失去对应下一级的数据，如图是批改非第一级的批改
在自定义列时，咱们把每一行勾选的值双向绑定到改行的 checks 属性上，因而咱们间接通过 js 去扭转某一行的 checks 值就能够达到扭转勾选状态
每一次值扭转，咱们都能够依据以后变动的行去获取其父节点直到第一层，也能够依据 row-key 去获取子节点，而后拿到对应的数据去扭转子节点和父级节点的状态

整体实现思路如下面所形容，能够依据这个思路去实现，难度不大，须要肯定的思路，因为是我的项目代码就补贴进去全副了

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

正文完