element tree父关联子,子不一定关联父

element tree父关联子,子不一定关联父_第1张图片

 <el-tree :check-strictly="true" :default-checked-keys="menuIdecho" :data="directorylist" show-checkbox
   default-expand-all node-key="id" ref="permissionTree" highlight-current :expand-on-click-node="false"
   :props="defaultProps" @check-change="checkChange" @check="clickDeal">
   <span class="one" slot-scope="{ node, data }">
     <span class="table_info_name">{{data.name}}</span>
     <span v-if="data.type==2" class="table_info_desc">{{data.desc}}</span>
   </span>
 </el-tree>
data(){
return{
//联动
menuIdecho: [], //回显
directorylist: [],
 checkedEquipments: [], //随意修改后的checked项(即要传到后台的变更数据)
 menuIds: [],
defaultProps: {
children: 'childList',
label: 'name'
},
}}
      //tree 父关联子不关联父样式---开始
      clickDeal(currentObj, treeStatus) {
        // 用于:父子节点严格互不关联时,父节点勾选变化时通知子节点同步变化,实现单向关联。
        let selected = treeStatus.checkedKeys.indexOf(currentObj.id) // -1未选中
        // 选中
        if (selected !== -1) {
          // 子节点只要被选中父节点就被选中
          this.selectedParent(currentObj)
          // 统一处理子节点为相同的勾选状态
          this.uniteChildSame(currentObj, true)
        } else {
          // 未选中 处理子节点全部未选中
          if (currentObj.childList.length !== 0) {
            this.uniteChildSame(currentObj, false)
          }
          // this.uniteChildSame(currentObj, false)
        }
        this.handleChange();
      },
      // 统一处理子节点为相同的勾选状态
      uniteChildSame(treeList, isSelected) {
        this.$refs.permissionTree.setChecked(treeList.id, isSelected)
        for (let i = 0; i < treeList.childList.length; i++) {
          this.uniteChildSame(treeList.childList[i], isSelected)
        }
      },
      // 统一处理父节点为选中
      selectedParent(currentObj) {
        let currentNode = this.$refs.permissionTree.getNode(currentObj)
        if (currentNode.parent.key !== undefined) {
          this.$refs.permissionTree.setChecked(currentNode.parent, true)
          this.selectedParent(currentNode.parent)
        }
      },
      //tree 父关联子不关联父样式---结束
      //tree 父关联子不关联父真是数据
      checkChange() {
        this.checkedEquipments = [...this.$refs.permissionTree.getCheckedKeys(), ...this.$refs.permissionTree
          .getHalfCheckedKeys()
        ];
        this.menuIds = this.checkedEquipments.join(",")
        this.handleChange();
      },

你可能感兴趣的:(element tree父关联子,子不一定关联父)