<template>
|
<!-- 列出表头的树状结构 -->
|
<el-tree
|
class="tree"
|
ref="tree"
|
:props="headTreeProps"
|
:data="copyTableHeader"
|
node-key="id"
|
show-checkbox
|
:default-checked-keys="defaultCheckedKeys"
|
@check="check"
|
/>
|
</template>
|
<script>
|
import { useCloned } from '@vueuse/core';
|
import tableCol from '../js/tableCol';
|
export default {
|
computed: {
|
defaultCheckedKeys() {
|
if (this.copyTableHeader.length == 0) {
|
this.tableHeaderCopy()
|
}
|
let result = this.collectLabels(this.copyTableHeader);
|
console.log("resultsss", result);
|
|
return result
|
}
|
},
|
mounted() {
|
this.tableHeaderCopy()
|
},
|
data() {
|
return {
|
copyTableHeader: [],
|
headTreeProps: {
|
children: 'children',
|
label: 'label',
|
disabled: 'disabled'
|
}
|
};
|
},
|
props: {
|
// 多级表头的数据
|
tableHeader: {
|
type: Array,
|
required: true
|
}
|
},
|
methods: {
|
getChangedHeaders() {
|
return this.copyTableHeader
|
},
|
tableHeaderCopy() {
|
this.copyTableHeader = useCloned(this.tableHeader).cloned.value
|
},
|
collectLabels(nodes) {
|
let labels = [];
|
|
function traverseNodes(nodes) {
|
nodes.forEach((node) => {
|
if (!('hidden' in node) || !node.hidden) {
|
labels.push(node.id);
|
}
|
|
// 如果当前节点有子节点，递归调用遍历函数
|
if (node.children && node.children.length > 0) {
|
traverseNodes(node.children);
|
}
|
});
|
}
|
|
traverseNodes(nodes); // 开始递归遍历
|
|
return labels; // 返回收集到的 labels 数组
|
},
|
check(checkedNode, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
|
checkedNode.hidden = !checkedNode.hidden;
|
this.$refs.tree.updateKeyChildren(checkedNode.id, checkedNode);
|
},
|
}
|
};
|
</script>
|
<style scoped>
|
.tree {
|
margin-left: -16.5px;
|
display: flex !important;
|
width: 100% !important;
|
flex-flow: row wrap !important;
|
}
|
</style>
|
