Vue DevUI开源指南02：深入理解树组件的多层次节点渲染

前端

2023-12-06 02:08:03

为 Vue DevUI 开源组件库贡献多层树组件

前言

在上一期直播中，我们介绍了向 Vue DevUI 开源组件库提交第一个 PR 的步骤。本文将继续介绍如何为 Vue DevUI 贡献一个多层树组件，全面覆盖实现原理、具体实现步骤和测试组件的方法。

实现原理：递归组件

实现多层树组件的关键在于使用 Vue 的递归组件，即组件嵌套。将每个节点视为子组件，并在父组件中使用它们，形成多层树结构。

具体实现步骤

1. 创建子组件 TreeNode

创建子组件 TreeNode，包含以下属性：

label: 节点标签（文本内容）
children: 子节点（TreeNode 组件数组）
isExpanded: 是否展开（布尔值）

2. 创建父组件 Tree

创建父组件 Tree，包含以下属性：

data: Tree 数据（TreeNode 组件数组）
defaultExpandedKeys: 默认展开节点的键（数组）

3. 编写模板

使用递归组件，在 Tree 组件模板中遍历 data 并使用 TreeNode 组件。在 TreeNode 模板中，使用 v-if 根据 isExpanded 显示或隐藏子节点。

4. 编写逻辑

使用 Vuex 定义 tree 模块，其中包含 data 和 defaultExpandedKeys 属性。

5. 测试组件

使用 Jest 测试组件，覆盖：

正确渲染
事件处理
Vuex 交互

6. 提交 PR

测试完成后，将组件提交到 Vue DevUI 仓库，附上详细的 PR 和测试用例。

代码示例

TreeNode.vue 子组件

<template>
  <li>
    <span @click="toggleExpand">{{ label }}</span>
    <ul v-if="isExpanded">
      <TreeNode v-for="child in children" :key="child.id" :label="child.label" :children="child.children" :isExpanded="child.isExpanded" />
    </ul>
  </li>
</template>

<script>
export default {
  props: ['label', 'children', 'isExpanded'],
  methods: {
    toggleExpand() {
      this.$emit('toggle-expand', this.id)
    }
  }
}
</script>

Tree.vue 父组件

<template>
  <ul>
    <TreeNode v-for="node in data" :key="node.id" :label="node.label" :children="node.children" :isExpanded="defaultExpandedKeys.includes(node.id)" @toggle-expand="handleToggleExpand" />
  </ul>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: ['defaultExpandedKeys'],
  computed: {
    ...mapState('tree', ['data'])
  },
  methods: {
    handleToggleExpand(id) {
      this.$store.commit('tree/toggleExpand', id)
    }
  }
}
</script>