elementui 树

ElementUI 树形组件（Tree）使用指南

ElementUI 提供了 el-tree 组件，用于展示层级结构的数据，如文件目录、组织架构等。以下是详细的使用方法和常见场景的解决方案。

基础用法

el-tree 组件需要传入 data 属性来渲染树形结构。数据格式通常是一个嵌套数组，每个节点包含 label 和 children 字段。

<template>
  <el-tree :data="treeData"></el-tree>
</template>

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

自定义节点内容

可以通过 scoped slot 自定义节点的显示内容，例如添加图标或按钮。

<el-tree :data="treeData">
  <template #default="{ node, data }">
    <span>{{ node.label }}</span>
    <el-button size="mini" @click="handleClick(data)">操作</el-button>
  </template>
</el-tree>

节点选中与复选框

el-tree 支持单选和多选模式：

• 单选模式：通过 highlight-current 启用高亮选中。
• 多选模式：设置 show-checkbox 属性，节点前会显示复选框。

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

动态加载数据

对于大数据量的树形结构，可以使用 lazy 模式动态加载子节点。

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

<script>
export default {
  data() {
    return {
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      }
    }
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        resolve([{ name: '根节点' }])
      } else {
        setTimeout(() => {
          resolve([
            { name: '子节点 1', leaf: true },
            { name: '子节点 2', leaf: false }
          ])
        }, 500)
      }
    }
  }
}
</script>

节点过滤

通过 filter-node-method 实现节点过滤功能。

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

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

常用事件

el-tree 提供了多个事件，如 node-click（节点点击）、check-change（复选框变化）等。

<el-tree
  :data="treeData"
  @node-click="handleNodeClick"
  @check-change="handleCheckChange">
</el-tree>

<script>
export default {
  methods: {
    handleNodeClick(data, node) {
      console.log('点击节点:', data.label)
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log('复选框变化:', data.label, checked)
    }
  }
}
</script>

常见问题

1. 如何获取选中的节点？

   • 使用 getCheckedNodes 方法获取已选中的节点列表。

     const checkedNodes = this.$refs.tree.getCheckedNodes()

2. 如何展开/折叠所有节点？

   • 调用 setCurrentKey 或 expandAll / collapseAll 方法。

     this.$refs.tree.expandAll() // 展开所有节点
     this.$refs.tree.collapseAll() // 折叠所有节点

3. 如何动态更新数据？

   • 直接修改 data 属性，树会自动重新渲染。

以上是 el-tree 的常用功能和示例，适用于大多数树形结构的开发需求。如需更高级的定制，可参考 ElementUI 官方文档。