elementUI tree动态渲染编辑时,选择父级时会全选所有的子级(回显时父节点和子节点都会被选中)

时间:2024-04-12 13:05:31

效果:elementUI tree动态渲染编辑时,选择父级时会全选所有的子级(回显时父节点和子节点都会被选中)

解决方法

         <el-tree

                :data="systemTree"

                show-checkbox

                node-key="code"

                :check-strictly="systemNodeFlag"                

                @check-change="handelCheckChange"

                :props="defaultProps" ref="systemTree">

          </el-tree>

1.设置check-strictly 是一个变量systemNodeFlag 默认值是false

2.拿到接口数据后:

     this.systemNodeFlag = true  //重点:给数节点赋值之前 先设置为true

     this.$nextTick(() => {
        this.checkedSystem//拿到接口数据,筛选出选中状态的数据添加到数组中
        this.$refs.systemTree.setCheckedKeys(this.checkedSystem) //给树节点赋值
        this.checkStrictly = false //重点: 赋值完成后 设置为false
      })

名词解释:

很多同学拿到数据后只是进行了setCheckedNodes赋值,所以会出现父节点和子节点都被选中都情况

check-strictly:在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false