el-tree转换为表格样式的记录2

上一篇文章记录的是自己将树状数据转换为表格形式。但是出现了一个小bug,点击子节点时候会选中父节点,这个是正常需求没问题。但是我点击父节点时候取消所有子节点,父节点 选择也会失去,这是我不想要执行的。例如一个页面里面有主页,各种小组件,但是我只想看一个主页,小组件都不要了。而不是我如果想要看主页必须最少选择一个组件。

代码:

el-tree的组件方法

check-change 节点选中状态发生变化时的回调 共三个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check 当复选框被点击的时候触发 共两个参数,依次为:传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性


          

一、递归调用获取所有的节点ID

setChecked 通过 key / data 设置某个节点的勾选状态,使用此方法必须设置 node-key 属性 (key/data, checked, deep) 接收三个参数,1. 勾选节点的 key 或者 data 2. boolean 类型,节点是否选中 3. boolean 类型,是否设置子节点 ,默认为 false

这里为什么不使用带S的。肯定是这个方法有问题。

setCheckedKeys 通过 keys 设置目前勾选的节点,使用此方法必须设置 node-key 属性

(keys, leafOnly) 接收两个参数,1. 勾选节点的 key 的数组 2. boolean 类型的参数,若为 true 则仅设置叶子节点的选中状态,默认值为 false

selectChildren(data) {
  if (data && data.sonPermissionList) {
    // 如果数据存在且有子权限列表
    data.sonPermissionList.map((item) => {
      // 将子节点的权限设置为勾选状态
      this.$refs.menuTree.setChecked(item.permissionId, true);
      if (data.sonPermissionList) {
        // 如果子权限列表存在,则递归调用 selectChildren 方法
        this.selectChildren(item);
      }
    });
  }
}

二,点击复选框事件

在点击时候能获取到当前的树目前的选中状态对象,包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性

handleCheck(data, { checkedKeys }) {
  // 第二个参数使用解构赋值获取选中状态的对象 checkedKeys
  // 使用 includes 方法判断当前节点的权限ID是否包含在 checkedKeys 中。如果包含,则调用 selectChildren 方法。
  if (checkedKeys.includes(data.permissionId)) {
    this.selectChildren(data);
  }
},

三、在点击复选框时候 进行父子节点的处理

handleCheckChange(data, checked, indeterminate) {
  if (checked === false) {
    if (data.sonPermissionList) {
      // 如果当前节点被取消勾选
      data.sonPermissionList.map((item) => {
        // 将子节点的权限设置为取消勾选状态
        this.$refs.menuTree.setChecked(item.permissionId, false);
      });
    }
  } else {
    if (data.pid !== null) {
      // 如果当前节点被勾选,并且有父节点
      this.$refs.menuTree.setChecked(data.pid, true);
    }
  }

  // 获取勾选状态的节点数组
  var check = this.$refs.menuTree.getCheckedNodes();
  // 提取节点数组中的权限ID,并去重
  var idList = check.map((item) => {
    this.permissionIdList = [];
    return item.permissionId;
  });
  this.permissionIdList.push(...idList);
  // 对去重后的权限ID列表进行过滤
  this.permissionIdList = this.permissionIdList.filter((item, index) => {
    return this.permissionIdList.indexOf(item, 0) === index;
  });
}

你可能感兴趣的:(vue.js,elementui,javascript)