ElementPlus+Vue树型结构显示数据

一、父-子上下两级

HTML：

            <el-tree
				v-if="permission.length > 0"
				:data="permission"
				:props="props"
				:show-checkbox="true"
				expand-on-click-node
				@check="handleCheck"
				default-expand-all
			>

default-expand-all：默认全部展开；expand-on-click-node：点击展开/收缩；:show-checkbox="true"：显示复选框；

JS：

			permission: [],    // 后端获得的数据
			props: {
				children: 'menu',     // 根节点包含所有子节点的字段
				label: 'title'        // 根节点标题字段
			},

二、多级

要将这个树形结构改为三级结构，你需要对数据进行处理，以确保每个节点的 children 属性包含下一级的子节点。下面是一个示例代码，展示如何将树形结构改为三级：

HTML：

<template>
  <div>
    <el-tree
      v-if="permission.length > 0"
      :data="permission"
      :props="props"
      :show-checkbox="true"
      expand-on-click-node
      @check="handleCheck"
      default-expand-all
    >
    </el-tree>
  </div>
</template>

JS：

<script>
export default {
  data() {
    return {
      permission: [], // 后端获得的数据
      props: {
        children: 'children', // 根节点包含所有子节点的字段
        label: 'title'        // 根节点标题字段
      }
    };
  },
  methods: {
    handleCheck(checkedNodes) {
      // 处理节点复选框事件，你可以在这里获取选中的节点信息
      console.log('选中的节点：', checkedNodes);
    }
  },
  async fetchData() {
    // 从后端获取树形数据
    try {
      // 替换以下代码以从后端获取数据
      // const response = await axios.get('/api/getPermissionData');
      // this.permission = response.data;

      // 模拟后端数据，树形结构包含三级
      // 即后台传入的数据得有title、children字段，children是一个List<List<Entity>>集合
      this.permission = [
        {
          title: '一级 1',
          children: [
            {
              title: '二级 1-1',
              children: [
                { title: '三级 1-1-1' },
                { title: '三级 1-1-2' }
              ]
            },
            { title: '二级 1-2' }
          ]
        },
        {
          title: '一级 2',
          children: [
            { title: '二级 2-1' },
            {
              title: '二级 2-2',
              children: [
                { title: '三级 2-2-1' }
              ]
            }
          ]
        }
      ];
    } catch (error) {
      console.error('获取树形数据失败：', error);
    }
  },
  async created() {
    // 在组件创建后获取树形数据
    this.fetchData();
  }
};
</script>

三、多选框

            <el-tree
				v-if="menu.length > 0"
				:data="menu"
				:props="props"
				:show-checkbox="true"
				node-key="id"
				expand-on-click-node
				@check="handleCheck"
				default-expand-all
				:default-checked-keys="checkedNodes"
			>
        其中：node-key="id"表示唯一标识，并且menu数据中存在id字段作为唯一标识

            checkedNodes: []    
            props: {
				children: 'menu',
				label: 'title'
			},
			menu: [],    

        handleCheck(checkNode) {
			const nodeId = checkNode.id
			console.log("id："+nodeId)
			const index = this.checkedNodes.indexOf(nodeId)
			if (index !== -1) {
				// 如果节点 ID 已经存在于数组中，表示取消勾选，将其移除
				this.checkedNodes.splice(index, 1);

				// 取消勾选时，取消所有子节点
				this.uncheckChildren(checkNode);
			} else {
				// 否则，添加节点 ID，表示勾选
				this.checkedNodes.push(nodeId);

				// 递归勾选子节点
				this.checkChildren(checkNode)
			}
			console.log(this.checkedNodes)
		},

		// 递归勾选子节点
		checkChildren(node) {
			if (node.menu && node.menu.length > 0) {
				// 遍历子节点并递归勾选
				for (const child of node.menu) {
					const childIndex = this.checkedNodes.indexOf(child.id);
					if (childIndex === -1) {
						// 如果子节点的 ID不存在于数组中，添加它
						this.checkedNodes.push(child.id);
					}
					this.checkChildren(child); // 递归处理子节点的子节点
				}
			}
		},

		// 取消勾选时，取消所有子节点
		uncheckChildren(node) {
			if (node.menu && node.menu.length > 0) {
				// 遍历子节点并递归取消勾选
				for (const child of node.menu) {
					const childIndex = this.checkedNodes.indexOf(child.id);
					if (childIndex !== -1) {
						// 如果子节点的 ID存在于数组中，取消勾选
						this.checkedNodes.splice(childIndex, 1);
					}
					this.uncheckChildren(child); // 递归处理子节点的子节点
				}
			}
		},

四、顶部添加全选根节点

HTML部分不变，改变数据集合：

            // 参数部分            
            permission: [],
			props: {
				children: 'menu',
				label: 'title'
			},

            // 通过api获取到的值重新定义
            xxxApi.loadData().then(data => {
				this.menu = [
					{
                        id: '0',
						title: '全选',
						menu: data
					}
				]
			})

五、数据回显复选框

将回显的数据存入：:default-checked-keys="checkedNodes" 中的 checkedNodes 集合中，并使用 node-key="id" 确保 default-checked-keys 属性中的 node-key 与数据对象中的节点键名一致，以使得根据数据的 node-key中的属性进行回显。

            <el-tree
				v-if="permission.length > 0"
				:data="permission"
				:props="props"
				:show-checkbox="true"
				expand-on-click-node
				@check="handleCheckB"
				default-expand-all
				:default-checked-keys="checkedNodesB"
				class="custom-tree"
				style="font-size: 15px"
				node-key="id"
			>

                   xApi.find(param).then(data => {
						this.checkedNodesB = data
						console.log(this.checkedNodesB)
					})