首页 前端知识 解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

2024-05-25 09:05:58 前端知识 前端哥 240 291 我要收藏

解决element ui中的el-tree组件default-checked-keys默认勾选节点问题

  • 需求
    • 解决方法
      • 方法1
      • 方法2

需求

选中子节点的时候,父节点必须被选中,但是仅展示被选中父节点和子节点

解决方法

方法1

html部分代码:

 <el-tree
     class="filter-tree"
     node-key="enCode"
     :data="areaTree"
     :props="defaultProps"
     :default-checked-keys="defaultChecked"
     :expand-on-click-node="false"
     show-checkbox
     default-expand-all
     ref="areaTrees">
</el-tree>

当需要动态改变树形结构的默认勾选值(例如每条数据都需要调接口查询,根据查询结果渲染树的选中情况)时,只修改defaultChecked的时,值的改变没有渲染相应的树节点,需要通过调用setCheckedKeys方法来改变选中状态:

js代码:

this.$nextTick(() => {
     this.$refs.areaTrees.setCheckedKeys(this.defaultChecked);
})

方法2

结合tree的ref属性

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree"
  :props="defaultProps">
</el-tree>

js代码:

this.$refs.tree.getCheckedNodes(false, true);

通过getCheckedNodes获取所有选中节点

编辑处理

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  ref="tree"
  :default-checked-keys="defaultKeys"
  :check-strictly="true"
  :props="defaultProps">
</el-tree>

最初准备使用default-checked-keys属性,但是并非预期的效果,因为如果defaultKeys包含父节点,那么它所属的子节点都会被选中,即使你新增的时候没有选中其中的某个子节点。
找了找属性,看到了check-strictly,其描述为"在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false",试了一下,展示效果没有问题,但是选中子类的时候,父类不会被选中,选中父类的时候,子类也不会被勾选,等于完全不在关联,也不是想要的效果。

最终处理

 this.$refs.tree.setChecked(key/data, checked, deep);

已选中的key循环使用setChecked处理,具体参数描述如下

(key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

其中有用的是第三个参数,不再对子节点进行设置,这样即保持了新增时候的选中效果,又可以点击父节点对子节点进行全部选中或者全部取消的效果。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9462.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!