前端秘笈：用Vue ElementUI实现父级不可选子级只能单选的树形结构

2022-11-20 03:06:13

踏上高效前端开发之旅：掌握ElementUI树形组件的奥秘

作为一名前端开发人员，您可能经常需要使用树形结构来组织和展示数据，例如文件系统、组织结构图或菜单导航。Vue ElementUI作为一款强大的前端组件库，提供了el-tree树形组件，可以帮助您轻松构建出美观实用的树形结构。

解锁父级不可选、子级单选的神秘代码

在某些场景中，您可能需要对树形结构进行更细致的控制，例如设置父级不可选、子级只能单选。ElementUI提供了这样的自定义功能，但官方文档的解释不够详细，导致很多开发者在使用时遇到困难。

别担心，本文将详细解析设置父级不可选、子级单选的代码实现，帮助您轻松掌握这一技巧。

<el-tree
  :data="treeData"
  :props="treeProps"
  :default-expand-all="true"
  node-key="id"
  highlight-current
  @node-click="handleNodeClick"
>
</el-tree>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '父级1',
          children: [
            {
              id: 2,
              label: '子级1-1'
            },
            {
              id: 3,
              label: '子级1-2'
            }
          ]
        },
        {
          id: 4,
          label: '父级2',
          children: [
            {
              id: 5,
              label: '子级2-1'
            },
            {
              id: 6,
              label: '子级2-2'
            }
          ]
        }
      ],
      treeProps: {
        children: 'children',
        label: 'label'
      },
      selectedNode: null
    };
  },
  methods: {
    handleNodeClick(data) {
      if (data.children) {
        return;
      }
      this.selectedNode = data;
    }
  }
};
</script>

逐行解析代码实现

<el-tree>组件配置：
- :data="treeData"：指定树形结构数据。
- :props="treeProps"：指定树形组件的属性。
- :default-expand-all="true"：默认展开所有节点。
- node-key="id"：确保每个节点都有唯一的ID。
- highlight-current：高亮显示当前选中的节点。
- @node-click="handleNodeClick"：节点点击事件。
handleNodeClick方法：
- 判断节点是否有子节点。
- 如果没有子节点，则将当前节点标记为已选择。