VUE篇之树形特殊篇

根节点是level:1, level3及其子节点有关联，但是和level2和他下面的子节点没有关联

思路：采用守护风琴效果，遍历出level1和level2级节点，后面level3的节点，采用树形结构进行关联

<template>
  <div :class="$style.root">
    <el-collapse v-model="activeName">
      <el-collapse-item v-for="itin treeData" :key="it.id" :name="it.id">
      
          <template slot="title">
            <el-checkbox v-model="it.checked" @change="changeData(it.id, it.children)"></el-checkbox>
            {{ it.label }}
          </template>
          <el-tree :ref="`tree-${it.id}`" :data="it.children" show-checkbox node-key="id" :props="defaultProps" />
        
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: '1',
      checkedParentIds: [],
      treeData: [
        {
          id: 1,
          label: '根节点',
          level: 1,
          children: [
            {
              id: 11,
              label: '一级 1',
              level: 2,
              children: [
                {
                  id: 4,
                  label: '二级 1-1',
                  level: 3,
                  children: [
                    { id: 9, label: '三级 1-1-1', level: 4 },
                    { id: 10, label: '三级 1-1-2', level: 4 }
                  ]
                }
              ]
            },
            {
              id: 2,
              label: '一级 2',
              level: 2,
              children: [
                {
                  id: 5,
                  label: '二级 2-1',
                  level: 3,
                  children: [{ id: 11, label: '三级 2-1-1', level: 4 }]
                },
                {
                  id: 6,
                  label: '二级 2-2',
                  level: 3
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    changeData(id, children) {
      if (this.checkedParentIds.includes(id)) {
        console.log('取消选中', id);
        this.checkedParentIds = this.checkedParentIds.filter(item => item !== id);
        this.setDisabled(children, false);
      } else {
        this.checkedParentIds = [...this.checkedParentIds, id];
        this.$refs[`tree-${id}`][0].setCheckedKeys([]); //取消勾选
        this.setDisabled(children, true);
        console.log('选中', id);
      }
    },
    //设置节点状态，true禁用false启用
    setDisabled(list, status) {
      list.forEach(item => {
        this.$set(item, 'disabled', status);
        if (item.children) {
          this.setDisabled(item.children, status);
        }
      });
    }
  }
};
</script>
<style lang="scss" module>
.root {
  padding: 20px;
}
:global {
  .el-collapse-item__content {
    padding: 0;
    padding-left:8px;
  }
  .el-collapse-item__header {
    padding-left: 20px;
    position: relative;
    height: 26px;
    line-height: 26px;
    .el-checkbox {
      position: absolute;
      right: 0;
    }
    .el-collapse-item__arrow {
      position: absolute;
      left: 0;
    }
    .el-icon-arrow-right:before {
      content: '\e791';
      color: #c0c4cc;
    }
  }
  .el-tree-node__content {
    position: relative;
    .el-checkbox {
      position: absolute;
      right: 0;
      margin-right: 0 !important;
    }
  }
}
</style>