当前位置: 首页 > article >正文

解决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)
      })
    },


http://www.kler.cn/news/160385.html

相关文章:

  • NFC和蓝牙在物联网中有什么意义?如何选择?
  • 华为设备使用python配置netconf 功能
  • javaee实验:文件上传及拦截器的使用
  • HarmonyOS4.0从零开始的开发教程03初识ArkTS开发语言(中)
  • RPC简介和grpc的使用
  • MySQL 添加注释(comment)
  • 二叉平衡树
  • CoDeF视频处理——视频风格转化部署使用与源码解析
  • 《Java 并发编程艺术》笔记(上)
  • 处理实时视频流:第三方美颜SDK的实时图像处理策略
  • idea开发环境配置
  • C++11改进观察者模式
  • js 将后端返回的对象转换为数组
  • VUEX使用总结
  • spark log4j日志配置
  • Amazon CodeWhisperer 正式可用, 并面向个人开发者免费开放
  • redis应用-分布式锁
  • Java - InetAddress#isReachable 方法解析
  • EPICS modbus 模块数字量读写练习
  • 分类与群组:解析分类和聚类分析技术
  • Kubernetes入门笔记——(2)k8s设计文档
  • java之stringbuf
  • 【9】PyQt对话框
  • Ubuntu 20.04 安装 mysql8 LTS
  • 【AI-ChatGPT-Prompt】什么是Prompt
  • Redis生产实战-热key、大key解决方案、数据库与缓存最终一致性解决方案
  • Centos7如何安装MySQL
  • HBase-架构与设计
  • 面试冲刺 - 算法题 1
  • 大数据生态架构:探索未来科技的无限可能。