Element UI 树形控件(Tree)使用详解

Element UI 树形控件(Tree)使用详解

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

树形控件是前端开发中常用的组件之一，Element UI 提供的 Tree 组件功能强大且易于使用。本文将详细介绍 Element UI 中 Tree 组件的各种用法和特性。

基础用法

Tree 组件最基本的功能是展示层级数据。以下是一个简单的示例：

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

在这个例子中，我们通过 data 属性传入树形数据，defaultProps 定义了数据结构的映射关系，node-click 事件会在节点被点击时触发。

节点选择功能

Tree 组件支持复选框选择功能，并且可以异步加载数据：

<el-tree
  :props="props"
  :load="loadNode"
  lazy
  show-checkbox
  @check-change="handleCheckChange">
</el-tree>

关键属性说明：

• lazy: 启用懒加载模式
• show-checkbox: 显示复选框
• load: 异步加载节点数据的函数
• check-change: 复选框状态变化时的回调

自定义节点内容

Tree 组件提供了两种自定义节点内容的方式：

1. 使用 render-content 函数

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

2. 使用作用域插槽

<el-tree :data="data">
  <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"
  :data="data"
  :filter-node-method="filterNode">
</el-tree>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    filterNode(value, data) {
      return data.label.indexOf(value) !== -1;
    }
  }
}
</script>

手风琴模式

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

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

可拖拽节点

通过 draggable 属性可以启用节点拖拽功能：

<el-tree
  :data="data"
  draggable
  @node-drop="handleDrop">
</el-tree>

高级特性

默认展开和选中

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

禁用节点

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

data: [{
  label: '一级 1',
  children: [{
    label: '二级 1-1',
    disabled: true
  }]
}]

总结

Element UI 的 Tree 组件提供了丰富的功能来展示和操作树形数据，包括：

1. 基础树形展示
2. 节点选择和复选框
3. 异步加载数据
4. 自定义节点内容
5. 节点过滤
6. 手风琴模式
7. 节点拖拽
8. 默认展开和选中
9. 节点禁用

通过合理组合这些功能，可以满足各种复杂的树形数据展示需求。在实际开发中，建议根据具体场景选择最合适的配置方式。

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