el-tree转换为表格样式的记录2-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-tree转换为表格样式的记录2。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

代码：

el-tree的组件方法

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

<el-tree
            show-checkbox
            :data="allMenu"
            :default-expand-all="true"
            node-key="permissionId"
            ref="menuTree"
            check-strictly
            highlight-current
            :props="xxxxx"
            empty-text="暂未匹配到信息"
            @check="handleCheck"
            @check-change="handleCheckChange"
          >
          </el-tree>

一、递归调用获取所有的节点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 四个属性文章来源地址https://www.toymoban.com/news/detail-603688.html

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;
  });
}

到了这里，关于el-tree转换为表格样式的记录2的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！