Vue3实现el-tree默认选中与展开节点的便捷指南

2023-05-06 15:44:19

El-tree: 轻松驾驭树状结构，实现默认选中和展开节点

El-tree 简介

Element Plus 为 Vue3 提供了出色的组件库，其中包含功能强大的 El-tree 组件，可用于构建美观且交互式的树状结构。它提供了丰富的功能，包括节点选中、展开、加载和拖拽等，满足您对树状结构的不同需求。

默认选中节点：快速定位，轻松操作

默认选中树状结构中的某个节点非常有用，因为它可以让用户快速定位或执行后续操作。使用 El-tree 的 default-checked 属性，您可以轻松实现此功能。

使用 default-checked 属性：

<el-tree
  :data="treeData"
  default-checked-keys="['node-1', 'node-2']"
/>

了解 default-checked 属性：
default-checked-keys 是一个数组，其中包含您希望默认选中的节点的 key。在本例中，'node-1' 和 'node-2' 将被默认选中。

展开节点：一览无余，尽收眼底

默认展开节点可以让用户在进入树状结构时无需手动展开节点即可查看内容，这对于提供良好的用户体验至关重要。使用 El-tree 的 default-expand-all 和 default-expanded-keys 属性，您可以实现默认展开节点的功能。

使用 default-expand-all 属性：

<el-tree
  :data="treeData"
  default-expand-all
/>

了解 default-expand-all 属性：
default-expand-all 是一个布尔值，如果设置为 true，则所有节点都将被默认展开。
使用 default-expanded-keys 属性：

<el-tree
  :data="treeData"
  default-expanded-keys="['node-1', 'node-2']"
/>

了解 default-expanded-keys 属性：
default-expanded-keys 是一个数组，其中包含您希望默认展开的节点的 key。在本例中，'node-1' 和 'node-2' 将被默认展开。

代码示例：实战演练

以下示例代码展示了如何使用 El-tree 实现默认选中和展开节点的功能：

<template>
  <el-tree
    :data="treeData"
    default-checked-keys="['node-1', 'node-2']"
    default-expanded-all
  />
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const treeData = ref([
      {
        id: 'node-1',
        label: 'Node 1',
        children: [
          {
            id: 'node-1-1',
            label: 'Node 1-1',
          },
          {
            id: 'node-1-2',
            label: 'Node 1-2',
          },
        ],
      },
      {
        id: 'node-2',
        label: 'Node 2',
        children: [
          {
            id: 'node-2-1',
            label: 'Node 2-1',
          },
          {
            id: 'node-2-2',
            label: 'Node 2-2',
          },
        ],
      },
    ])

    return {
      treeData,
    }
  },
}
</script>