技術標籤：vue學習總結vue.js

el-tree元件父子關聯問題

el-tree選了父節點後，子節點均會選中，子節點都取消之後，父節點也取消，導致不選擇子節點就無法選擇父節點
解決：取消父子關聯關係

: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]);
      }
    }
  }
},