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

最新推荐文章于 2025-05-30 09:06:32 发布

嵇殉嵘Eliza

最新推荐文章于 2025-05-30 09:06:32 发布

阅读量526

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00316/article/details/148324585

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

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

树形控件(Tree)是Element UI中用于展示层级数据的重要组件，它能够清晰地展示具有父子关系的数据结构。本文将全面介绍Tree组件的各种用法和特性。

基本用法

最基本的树形结构展示，只需要提供层级数据即可。

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

<script>
export default {
  data() {
    return {
      data: [{
        label: '一级节点1',
        children: [{
          label: '二级节点1-1',
          children: [{
            label: '三级节点1-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  }
}
</script>

关键点说明：

data属性接收树形数据
props配置项用于指定数据中表示子节点和标签的字段名
默认情况下，点击节点会展开/折叠子节点

可选中树

Tree组件支持节点选择功能，可以配置复选框。

<el-tree
  :data="data"
  show-checkbox
  node-key="id"
  :props="defaultProps">
</el-tree>

特性说明：

show-checkbox属性启用复选框
node-key指定节点的唯一标识字段
可以通过default-checked-keys设置默认选中的节点

懒加载模式

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

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

<script>
export default {
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: '根节点' }]);
      }
      if (node.level > 3) return resolve([]);
      
      // 模拟异步加载
      setTimeout(() => {
        resolve([{
          name: '子节点'
        }]);
      }, 500);
    }
  }
}
</script>

懒加载要点：

设置lazy属性启用懒加载
通过load方法动态加载子节点
首次加载只需返回顶层节点
当用户展开节点时才会加载其子节点

禁用节点

某些场景下需要禁用特定节点。

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

<script>
export default {
  data() {
    return {
      data: [{
        label: '可点击节点',
        children: [{
          label: '禁用节点',
          disabled: true
        }]
      }],
      defaultProps: {
        disabled: 'disabled'
      }
    }
  }
}
</script>

禁用配置：

在数据中设置disabled: true
通过props指定禁用字段名
禁用节点不可选中且不可展开

节点操作

Tree组件支持丰富的节点操作功能。

默认展开/选中

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

获取选中节点

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

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

设置选中状态

// 通过节点对象设置
this.$refs.tree.setCheckedNodes(nodes)

// 通过节点ID设置
this.$refs.tree.setCheckedKeys(keys)

自定义节点内容

Tree组件支持完全自定义节点内容。

使用render函数

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

<script>
methods: {
  renderContent(h, { node, data }) {
    return h('span', [
      h('span', node.label),
      h('el-button', {
        on: { click: () => this.append(data) }
      }, '添加')
    ])
  }
}
</script>

使用作用域插槽

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

节点过滤

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

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

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterNode(value, data) {
      return data.label.includes(value)
    }
  }
}
</script>

过滤原理：

通过filter方法触发过滤
filter-node-method定义过滤逻辑
不匹配的节点会被隐藏

手风琴模式

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

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

节点拖拽

Tree组件支持节点拖拽排序功能。

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

<script>
export default {
  methods: {
    // 判断是否允许放置
    allowDrop(draggingNode, dropNode, type) {
      return type !== 'inner'
    },
    // 拖拽完成回调
    handleDrop(draggingNode, dropNode, type) {
      console.log('节点位置已变更')
    }
  }
}
</script>

拖拽功能说明：