解决el-tree数据回显时子节点部分选中父节点都全选中问题

//数据结构

<el-tree ref="tree_edit" :check-strictly="checkStrictly" :data="powerList" :props="defaultProps" :default-expand-all="true" :default-expanded-keys="checkedCities" :default-checked-keys="checkedCities" @check-change="handleClick_edit" show-checkbox node-key="id" class="permission-tree" />

powerList: [], //数组
checkList_edit: [],//修改勾选
checkStrictly: false,
defaultProps: {
   children: 'children',
   label: 'menuName',
},

编辑回显方法(匹配选中id,接口返回选中id数组)设置选中:

 edit(index) {
      this.dialogFormVisible_edit = true;
      this.checkStrictly = true;  //重点:给数节点赋值之前 先设置为true
      let menuIds = Array.from(new Set(this.tableData[index].menuButtonIds.split(",")));
      let intArray = menuIds.map(str => parseInt(str));
      console.log(intArray);
      API.GetMenu({}).then(res => {
        if (res.code == 200) {
          this.roleform_edit.id = this.tableData[index].id;
          this.roleform_edit.status = this.tableData[index].status;
          this.roleform_edit.roleName = this.tableData[index].roleName;
          this.roleform_edit.remark = this.tableData[index].remark;
          this.$nextTick(() => {
            this.powerList = res.data;
            this.checkedCities = intArray;//回显
            this.$refs.tree_edit.setCheckedKeys(intArray, true)
            this.checkStrictly = false //重点: 赋值完成后 设置为false
          })

          //简单方法
          /*this.$nextTick(() => {
            let arr=[];
            this.powerList.forEach(item=>{
              if(!this.$refs.tree_edit.getNode(item.id).childNodes || !this.$refs.tree_edit.getNode(item.id).childNodes.length){
                arr.push(item.id)
              }
            })
            this.$refs.tree_edit.setCheckedKeys(arr);
          })*/
        } else {
          return false;
        }
      })
    },

再次勾选方法(以原数据结构获取选中数据):

handleClick_edit(data, checked, node) {
      if (checked) {
        let childNode = this.$refs.tree_edit.getCheckedKeys();//返回选中子节点的key   
        let parentNode = this.$refs.tree_edit.getHalfCheckedKeys();//返回选中父节点的key   
        let checkedAll = childNode.concat(parentNode);
        this.checkList_edit = this.treeFilter(this.powerList, node => checkedAll.includes(node.id))
        console.log(this.checkList_edit)
      }
    },
//递归匹配
    treeFilter(tree, func) {
      return tree.map(node => ({ ...node })).filter(node => {
        node.children = node.children && this.treeFilter(node.children, func)
        return func(node) || (node.children && node.children.length)
      })
    },

最近更新

  1. TCP协议是安全的吗?

    2023-12-06 15:38:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-06 15:38:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-06 15:38:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-06 15:38:03       20 阅读

热门阅读

  1. Backend - Python 序列化

    2023-12-06 15:38:03       35 阅读
  2. 还记得当初自己为什么选择计算机?

    2023-12-06 15:38:03       35 阅读
  3. Linux学习

    2023-12-06 15:38:03       37 阅读
  4. linux docker 使用详解

    2023-12-06 15:38:03       30 阅读
  5. C51--DHT11数据读取并通过串口上传--LCD显示

    2023-12-06 15:38:03       29 阅读
  6. 【笔记】MySQL now()/sysdate()是否走索引

    2023-12-06 15:38:03       48 阅读
  7. docker启动nginx

    2023-12-06 15:38:03       38 阅读
  8. MySQL三 | 多表查询

    2023-12-06 15:38:03       43 阅读