Vue + Element-Tree 控件的奇妙组合：1 级（父级）和 3 级标签的父子传值递归展示

创建交互式树形结构：Vue 和 Element-Tree 控件教程

在当今注重用户体验的世界中，构建复杂且引人入胜的界面至关重要。Vue，作为 JavaScript 框架领域的佼佼者，以其简洁的语法和丰富的组件库脱颖而出。而 Element-Tree 控件正是 Element UI 中的一颗明珠，它让创建和操作树形结构变得轻而易举。

1. 项目初始化

第一步是创建一个 Vue 项目，您可以使用 Vue CLI 或其他您熟悉的工具。

2. 安装 Element UI

接着，使用以下命令安装 Element UI：

npm install element-ui

并在 main.js 文件中引入它：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 创建 Vue 组件

接下来，创建一个名为 TreeComponent.vue 的 Vue 组件，它将负责处理树形结构：

<template>
  <div>
    <el-tree
      :data="treeData"
      node-key="id"
      :props="defaultProps"
      :show-checkbox="true"
      @node-click="handleNodeClick"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: '父级标签 1',
          children: [
            {
              id: 2,
              label: '三级标签 1-1',
            },
            {
              id: 3,
              label: '三级标签 1-2',
            },
            {
              id: 4,
              label: '三级标签 1-3',
            },
          ],
        },
        {
          id: 5,
          label: '父级标签 2',
          children: [
            {
              id: 6,
              label: '三级标签 2-1',
            },
            {
              id: 7,
              label: '三级标签 2-2',
            },
            {
              id: 8,
              label: '三级标签 2-3',
            },
          ],
        },
        {
          id: 9,
          label: '父级标签 3',
          children: [
            {
              id: 10,
              label: '三级标签 3-1',
            },
            {
              id: 11,
              label: '三级标签 3-2',
            },
            {
              id: 12,
              label: '三级标签 3-3',
            },
          ],
        },
      ],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      selectedKeys: [],
    }
  },
  methods: {
    handleNodeClick(data) {
      this.selectedKeys = [data.id]
    },
  },
}
</script>

4. 注册组件并使用

在父组件中注册并使用 TreeComponent.vue 组件：

<template>
  <div>
    <tree-component></tree-component>
  </div>
</template>

<script>
import TreeComponent from './TreeComponent.vue'

export default {
  components: {
    TreeComponent,
  },
}
</script>

5. 运行项目

现在，运行您的项目。您会看到一个树形结构，仅显示父级和三级标签。点击某个标签会将其选中。

结论

结合 Vue 和 Element-Tree 控件，我们可以轻松实现父子传值和递归展示多级标签。这对于构建复杂的用户界面非常有用，例如文件浏览器或组织结构图。

常见问题解答

1. 如何改变树形结构的样式？

   您可以通过修改 element-ui/lib/theme-chalk/index.css 文件中的样式来更改树形结构的外观。

2. 如何获取选中节点的 ID？

   您可以使用 @node-click 事件来获取选中节点的 ID。

3. 如何禁用某些节点？

   您可以在 treeData 中设置 disabled 属性来禁用某些节点。

4. 如何添加自定义节点图标？

   您可以使用 icon 属性来为节点添加自定义图标。

5. 如何将数据从父组件传递到树形组件？

   您可以通过 props 将数据从父组件传递到树形组件。