VUE篇之树形特殊篇

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

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

<template><div :class="$style.root"><el-collapse v-model="activeName"><el-collapse-item v-for="item in treeData" :key="item.id" :name="item.id"><template slot="title"><el-checkbox v-model="item.checked" @change="changeData(item.id, item.children)"></el-checkbox>{{ item.label }}</template><el-collapse-item v-for="it in item.children" :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-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>