Element UI 树形控件(Tree)全面指南

Element UI 树形控件(Tree)全面指南

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element

什么是树形控件？

树形控件(Tree)是前端开发中常用的组件，用于展示具有层级结构的数据。Element UI 提供的 Tree 组件功能强大且易于使用，支持节点选择、懒加载、自定义节点内容、拖拽排序等多种功能。

基础用法

基本树形结构

最基本的树形结构只需要提供 data 属性和 props 配置即可：

<el-tree :data="data" :props="defaultProps"></el-tree>

data 是一个数组，包含树形结构的节点数据，每个节点可以包含 children 属性来表示子节点。defaultProps 用于配置数据字段映射：

defaultProps: {
  children: 'children',  // 指定子节点字段名
  label: 'label'        // 指定节点显示文本字段名
}

进阶功能

可选择节点

通过添加 show-checkbox 属性，可以让树形节点显示复选框：

<el-tree :data="data" show-checkbox></el-tree>

懒加载模式

对于大数据量的树形结构，可以使用懒加载来优化性能：

<el-tree :props="props" :load="loadNode" lazy></el-tree>

需要实现 loadNode 方法来动态加载子节点数据：

loadNode(node, resolve) {
  if (node.level === 0) {
    return resolve([{ name: '根节点' }]);
  }
  // 根据节点信息加载子节点
  setTimeout(() => {
    resolve([{ name: '子节点1' }, { name: '子节点2' }]);
  }, 500);
}

自定义节点内容

Tree 组件支持两种方式自定义节点内容：

1. 使用 render-content 函数：

<el-tree :render-content="renderContent"></el-tree>

2. 使用作用域插槽：

<el-tree>
  <span slot-scope="{ node, data }">
    <span>{{ node.label }}</span>
    <el-button @click="append(data)">添加</el-button>
  </span>
</el-tree>

节点过滤

Tree 组件支持节点过滤功能：

<el-input v-model="filterText" placeholder="输入过滤关键字"></el-input>
<el-tree ref="tree" :filter-node-method="filterNode"></el-tree>

实现过滤方法：

filterNode(value, data) {
  if (!value) return true;
  return data.label.indexOf(value) !== -1;
}

手风琴模式

设置 accordion 属性可以开启手风琴模式，同一层级只能展开一个节点：

<el-tree :data="data" accordion></el-tree>

拖拽排序

通过添加 draggable 属性启用拖拽功能：

<el-tree :data="data" draggable></el-tree>

可以监听各种拖拽事件：

@node-drag-start="handleDragStart"
@node-drag-enter="handleDragEnter"
@node-drag-end="handleDragEnd"
@node-drop="handleDrop"

实用技巧

默认展开和选中

使用 default-expanded-keys 和 default-checked-keys 可以设置默认展开和选中的节点：

<el-tree 
  :default-expanded-keys="[2, 3]" 
  :default-checked-keys="[5]"
  node-key="id">
</el-tree>

获取和设置选中节点

Tree 组件提供了多种方法来操作选中节点：

// 获取选中节点
this.$refs.tree.getCheckedNodes()
this.$refs.tree.getCheckedKeys()

// 设置选中节点
this.$refs.tree.setCheckedNodes(nodes)
this.$refs.tree.setCheckedKeys(keys)

禁用节点

在节点数据中添加 disabled: true 可以禁用该节点：

data: [{
  label: '节点1',
  disabled: true,
  children: [...]
}]

总结

Element UI 的 Tree 组件功能全面，可以满足各种树形结构展示的需求。通过合理使用其提供的属性和方法，可以轻松实现复杂的树形交互功能。在实际项目中，建议根据数据量大小选择合适的加载方式（一次性加载或懒加载），并根据业务需求合理使用节点选择、过滤、拖拽等功能。

element A Vue.js 2.0 UI Toolkit for Web 项目地址: https://gitcode.com/gh_mirrors/eleme/element