学无先后,达者为师

网站首页 编程语言 正文

element树组件父子关联

作者:大橙子额 更新时间: 2022-03-03 编程语言

el-tree组件父子关联问题

el-tree选了父节点后,子节点均会选中,子节点都取消之后,父节点也取消,导致不选择子节点就无法选择父节点
解决:取消父子关联关系
element配置

:check-strictly="true"

这样父、子节点完全不关联,勾选毫无关系。
但是业务需求是,要勾选子节点必须先勾选父节点
于是写了@check方法,在勾选子节点时,自动勾选父节点

<el-tree
  :data="menuOptions"
  show-checkbox
  ref="menu"
  node-key="id"
  :check-strictly="true"
  @check="getCurrentNode"
  empty-text="加载中,请稍后"
  :props="defaultProps"
  :default-checked-keys="defaultCheckedKeys"
></el-tree>
getCurrentNode(data) {
  const node = this.$refs.menu.getNode(data);
  this.childNodes(node);
  this.parentNodes(node);
},
childNodes(node) {
  const len = node.childNodes.length;
  for (let i = 0; i < len; i += 1) {
    node.childNodes[i].checked = node.checked;
    this.childNodes(node.childNodes[i]);
  }
},
parentNodes(node) {
 if (node.parent) {
    for (const key in node) {
      if (key === 'parent') {
        node[key].checked = true;
        this.parentNodes(node[key]);
      }
    }
  }
},

原文链接:https://blog.csdn.net/weixin_43043994/article/details/110976934

栏目分类
最近更新