Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

基础用法

基础的树形结构展示

Tree 树形控件 - 图1

  1. <template>
  2.   <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
  3. </template>
  5. <script lang="ts" setup>
  6. interface Tree {
  7.   label: string
  8.   children?: Tree[]
  9. }
  11. const handleNodeClick = (data: Tree) => {
  12.   console.log(data)
  13. }
  15. const data: Tree[] = [
  16.   {
  17.     label: 'Level one 1',
  18.     children: [
  19.       {
  20.         label: 'Level two 1-1',
  21.         children: [
  22.           {
  23.             label: 'Level three 1-1-1',
  24.           },
  25.         ],
  26.       },
  27.     ],
  28.   },
  29.   {
  30.     label: 'Level one 2',
  31.     children: [
  32.       {
  33.         label: 'Level two 2-1',
  34.         children: [
  35.           {
  36.             label: 'Level three 2-1-1',
  37.           },
  38.         ],
  39.       },
  40.       {
  41.         label: 'Level two 2-2',
  42.         children: [
  43.           {
  44.             label: 'Level three 2-2-1',
  45.           },
  46.         ],
  47.       },
  48.     ],
  49.   },
  50.   {
  51.     label: 'Level one 3',
  52.     children: [
  53.       {
  54.         label: 'Level two 3-1',
  55.         children: [
  56.           {
  57.             label: 'Level three 3-1-1',
  58.           },
  59.         ],
  60.       },
  61.       {
  62.         label: 'Level two 3-2',
  63.         children: [
  64.           {
  65.             label: 'Level three 3-2-1',
  66.           },
  67.         ],
  68.       },
  69.     ],
  70.   },
  71. ]
  73. const defaultProps = {
  74.   children: 'children',
  75.   label: 'label',
  76. }
  77. </script>

可选择

适用于需要选择层级时使用。

本例还展示了动态加载节点数据的方法。

Tree 树形控件 - 图2

  1. <template>
  2.   <el-tree
  3.     :props="props"
  4.     :load="loadNode"
  5.     lazy
  6.     show-checkbox
  7.     @check-change="handleCheckChange"
  8.   />
  9. </template>
  11. <script lang="ts" setup>
  12. import type Node from 'element-plus/es/components/tree/src/model/node'
  13. let count = 1
  15. interface Tree {
  16.   name: string
  17. }
  19. const props = {
  20.   label: 'name',
  21.   children: 'zones',
  22. }
  24. const handleCheckChange = (
  25.   data: Tree,
  26.   checked: boolean,
  27.   indeterminate: boolean
  28. ) => {
  29.   console.log(data, checked, indeterminate)
  30. }
  32. const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  33.   if (node.level === 0) {
  34.     return resolve([{ name: 'Root1' }, { name: 'Root2' }])
  35.   }
  36.   if (node.level > 3) return resolve([])
  38.   let hasChild = false
  39.   if (node.data.name === 'region1') {
  40.     hasChild = true
  41.   } else if (node.data.name === 'region2') {
  42.     hasChild = false
  43.   } else {
  44.     hasChild = Math.random() > 0.5
  45.   }
  47.   setTimeout(() => {
  48.     let data: Tree[] = []
  49.     if (hasChild) {
  50.       data = [
  51.         {
  52.           name: `zone${count++}`,
  53.         },
  54.         {
  55.           name: `zone${count++}`,
  56.         },
  57.       ]
  58.     } else {
  59.       data = []
  60.     }
  62.     resolve(data)
  63.   }, 500)
  64. }
  65. </script>

懒加载自定义叶子节点

由于在点击节点时才进行该层数据的获取，默认情况下 Tree 无法预知某个节点是否为叶子节点， 所以会为每个节点添加一个下拉按钮，如果节点没有下层数据，则点击后下拉按钮会消失。 同时，你也可以提前告知 Tree 某个节点是否为叶子节点，从而避免在叶子节点前渲染下拉按钮。

Tree 树形控件 - 图3

  1. <template>
  2.   <el-tree :props="props" :load="loadNode" lazy show-checkbox />
  3. </template>
  5. <script lang="ts" setup>
  6. import type Node from 'element-plus/es/components/tree/src/model/node'
  8. interface Tree {
  9.   name: string
  10.   leaf?: boolean
  11. }
  13. const props = {
  14.   label: 'name',
  15.   children: 'zones',
  16.   isLeaf: 'leaf',
  17. }
  19. const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
  20.   if (node.level === 0) {
  21.     return resolve([{ name: 'region' }])
  22.   }
  23.   if (node.level > 1) return resolve([])
  25.   setTimeout(() => {
  26.     const data: Tree[] = [
  27.       {
  28.         name: 'leaf',
  29.         leaf: true,
  30.       },
  31.       {
  32.         name: 'zone',
  33.       },
  34.     ]
  36.     resolve(data)
  37.   }, 500)
  38. }
  39. </script>

禁用复选框

节点的复选框可以设置为禁用。

在示例中，通过 disabled 设置禁用状态。 相应的复选框已禁用，不能点击。

Tree 树形控件 - 图4

  1. <template>
  2.   <el-tree :data="data" :props="defaultProps" show-checkbox />
  3. </template>
  5. <script lang="ts" setup>
  6. const defaultProps = {
  7.   children: 'children',
  8.   label: 'label',
  9.   disabled: 'disabled',
  10. }
  12. const data = [
  13.   {
  14.     id: 1,
  15.     label: 'Level one 1',
  16.     children: [
  17.       {
  18.         id: 3,
  19.         label: 'Level two 2-1',
  20.         children: [
  21.           {
  22.             id: 4,
  23.             label: 'Level three 3-1-1',
  24.           },
  25.           {
  26.             id: 5,
  27.             label: 'Level three 3-1-2',
  28.             disabled: true,
  29.           },
  30.         ],
  31.       },
  32.       {
  33.         id: 2,
  34.         label: 'Level two 2-2',
  35.         disabled: true,
  36.         children: [
  37.           {
  38.             id: 6,
  39.             label: 'Level three 3-2-1',
  40.           },
  41.           {
  42.             id: 7,
  43.             label: 'Level three 3-2-2',
  44.             disabled: true,
  45.           },
  46.         ],
  47.       },
  48.     ],
  49.   },
  50. ]
  51. </script>

禁用状态

可将 Tree 的某些节点设置为禁用状态

分别通过 default-expanded-keys 和 default-checked-keys 设置默认展开和默认选中的节点。 需要注意的是，此时必须设置 node-key， 其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。

Tree 树形控件 - 图5

  1. <template>
  2.   <el-tree
  3.     :data="data"
  4.     show-checkbox
  5.     node-key="id"
  6.     :default-expanded-keys="[2, 3]"
  7.     :default-checked-keys="[5]"
  8.     :props="defaultProps"
  9.   />
  10. </template>
  12. <script lang="ts" setup>
  13. const defaultProps = {
  14.   children: 'children',
  15.   label: 'label',
  16. }
  17. const data = [
  18.   {
  19.     id: 1,
  20.     label: 'Level one 1',
  21.     children: [
  22.       {
  23.         id: 4,
  24.         label: 'Level two 1-1',
  25.         children: [
  26.           {
  27.             id: 9,
  28.             label: 'Level three 1-1-1',
  29.           },
  30.           {
  31.             id: 10,
  32.             label: 'Level three 1-1-2',
  33.           },
  34.         ],
  35.       },
  36.     ],
  37.   },
  38.   {
  39.     id: 2,
  40.     label: 'Level one 2',
  41.     children: [
  42.       {
  43.         id: 5,
  44.         label: 'Level two 2-1',
  45.       },
  46.       {
  47.         id: 6,
  48.         label: 'Level two 2-2',
  49.       },
  50.     ],
  51.   },
  52.   {
  53.     id: 3,
  54.     label: 'Level one 3',
  55.     children: [
  56.       {
  57.         id: 7,
  58.         label: 'Level two 3-1',
  59.       },
  60.       {
  61.         id: 8,
  62.         label: 'Level two 3-2',
  63.       },
  64.     ],
  65.   },
  66. ]
  67. </script>

树节点的选择

本例展示如何获取和设置选中节点。 获取和设置各有两种方式：通过 node 或通过 key。 如果需要通过 key 来获取或设置，则必须设置 node-key。

Tree 树形控件 - 图6

  1. <template>
  2.   <el-tree
  3.     ref="treeRef"
  4.     :data="data"
  5.     show-checkbox
  6.     default-expand-all
  7.     node-key="id"
  8.     highlight-current
  9.     :props="defaultProps"
  10.   />
  12.   <div class="buttons">
  13.     <el-button @click="getCheckedNodes">get by node</el-button>
  14.     <el-button @click="getCheckedKeys">get by key</el-button>
  15.     <el-button @click="setCheckedNodes">set by node</el-button>
  16.     <el-button @click="setCheckedKeys">set by key</el-button>
  17.     <el-button @click="resetChecked">reset</el-button>
  18.   </div>
  19. </template>
  21. <script lang="ts" setup>
  22. import { ref } from 'vue'
  23. import { ElTree } from 'element-plus'
  24. import type Node from 'element-plus/es/components/tree/src/model/node'
  26. interface Tree {
  27.   id: number
  28.   label: string
  29.   children?: Tree[]
  30. }
  32. const treeRef = ref<InstanceType<typeof ElTree>>()
  34. const getCheckedNodes = () => {
  35.   console.log(treeRef.value!.getCheckedNodes(false, false))
  36. }
  37. const getCheckedKeys = () => {
  38.   console.log(treeRef.value!.getCheckedKeys(false))
  39. }
  40. const setCheckedNodes = () => {
  41.   treeRef.value!.setCheckedNodes(
  42.     [
  43.       {
  44.         id: 5,
  45.         label: 'Level two 2-1',
  46.       },
  47.       {
  48.         id: 9,
  49.         label: 'Level three 1-1-1',
  50.       },
  51.     ] as Node[],
  52.     false
  53.   )
  54. }
  55. const setCheckedKeys = () => {
  56.   treeRef.value!.setCheckedKeys([3], false)
  57. }
  58. const resetChecked = () => {
  59.   treeRef.value!.setCheckedKeys([], false)
  60. }
  62. const defaultProps = {
  63.   children: 'children',
  64.   label: 'label',
  65. }
  67. const data: Tree[] = [
  68.   {
  69.     id: 1,
  70.     label: 'Level one 1',
  71.     children: [
  72.       {
  73.         id: 4,
  74.         label: 'Level two 1-1',
  75.         children: [
  76.           {
  77.             id: 9,
  78.             label: 'Level three 1-1-1',
  79.           },
  80.           {
  81.             id: 10,
  82.             label: 'Level three 1-1-2',
  83.           },
  84.         ],
  85.       },
  86.     ],
  87.   },
  88.   {
  89.     id: 2,
  90.     label: 'Level one 2',
  91.     children: [
  92.       {
  93.         id: 5,
  94.         label: 'Level two 2-1',
  95.       },
  96.       {
  97.         id: 6,
  98.         label: 'Level two 2-2',
  99.       },
  100.     ],
  101.   },
  102.   {
  103.     id: 3,
  104.     label: 'Level one 3',
  105.     children: [
  106.       {
  107.         id: 7,
  108.         label: 'Level two 3-1',
  109.       },
  110.       {
  111.         id: 8,
  112.         label: 'Level two 3-2',
  113.       },
  114.     ],
  115.   },
  116. ]
  117. </script>

自定义节点内容

节点的内容支持自定义，可以在节点区添加按钮或图标等内容

可以通过两种方法进行树节点内容的自定义：render-content 和 scoped slot。 使用 render-content 指定渲染函数，该函数返回需要的节点区内容即可。 渲染函数的用法请参考 Vue 文档。 使用 scoped slot 会传入两个参数 node 和 data，分别表示当前节点的 Node 对象和当前节点的数据。 注意：由于 jsfiddle 不支持 JSX 语法，所以render-content示例在 jsfiddle 中无法运行。 但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。

Tree 树形控件 - 图7

  1. <template>
  2.   <div class="custom-tree-container">
  3.     <p>Using render-content</p>
  4.     <el-tree
  5.       :data="dataSource"
  6.       show-checkbox
  7.       node-key="id"
  8.       default-expand-all
  9.       :expand-on-click-node="false"
  10.       :render-content="renderContent"
  11.     />
  12.     <p>Using scoped slot</p>
  13.     <el-tree
  14.       :data="dataSource"
  15.       show-checkbox
  16.       node-key="id"
  17.       default-expand-all
  18.       :expand-on-click-node="false"
  19.     >
  20.       <template #default="{ node, data }">
  21.         <span class="custom-tree-node">
  22.           <span>{{ node.label }}</span>
  23.           <span>
  24.             <a @click="append(data)"> Append </a>
  25.             <a style="margin-left: 8px" @click="remove(node, data)"> Delete </a>
  26.           </span>
  27.         </span>
  28.       </template>
  29.     </el-tree>
  30.   </div>
  31. </template>
  33. <script lang="ts" setup>
  34. import { ref } from 'vue'
  35. import type Node from 'element-plus/es/components/tree/src/model/node'
  37. interface Tree {
  38.   id: number
  39.   label: string
  40.   children?: Tree[]
  41. }
  42. let id = 1000
  44. const append = (data: Tree) => {
  45.   const newChild = { id: id++, label: 'testtest', children: [] }
  46.   if (!data.children) {
  47.     data.children = []
  48.   }
  49.   data.children.push(newChild)
  50.   dataSource.value = [...dataSource.value]
  51. }
  53. const remove = (node: Node, data: Tree) => {
  54.   const parent = node.parent
  55.   const children: Tree[] = parent.data.children || parent.data
  56.   const index = children.findIndex((d) => d.id === data.id)
  57.   children.splice(index, 1)
  58.   dataSource.value = [...dataSource.value]
  59. }
  61. const renderContent = (
  62.   h,
  63.   {
  64.     node,
  65.     data,
  66.     store,
  67.   }: {
  68.     node: Node
  69.     data: Tree
  70.     store: Node['store']
  71.   }
  72. ) => {
  73.   return h(
  74.     'span',
  75.     {
  76.       class: 'custom-tree-node',
  77.     },
  78.     h('span', null, node.label),
  79.     h(
  80.       'span',
  81.       null,
  82.       h(
  83.         'a',
  84.         {
  85.           onClick: () => append(data),
  86.         },
  87.         'Append '
  88.       ),
  89.       h(
  90.         'a',
  91.         {
  92.           style: 'margin-left: 8px',
  93.           onClick: () => remove(node, data),
  94.         },
  95.         'Delete'
  96.       )
  97.     )
  98.   )
  99. }
  101. const dataSource = ref<Tree[]>([
  102.   {
  103.     id: 1,
  104.     label: 'Level one 1',
  105.     children: [
  106.       {
  107.         id: 4,
  108.         label: 'Level two 1-1',
  109.         children: [
  110.           {
  111.             id: 9,
  112.             label: 'Level three 1-1-1',
  113.           },
  114.           {
  115.             id: 10,
  116.             label: 'Level three 1-1-2',
  117.           },
  118.         ],
  119.       },
  120.     ],
  121.   },
  122.   {
  123.     id: 2,
  124.     label: 'Level one 2',
  125.     children: [
  126.       {
  127.         id: 5,
  128.         label: 'Level two 2-1',
  129.       },
  130.       {
  131.         id: 6,
  132.         label: 'Level two 2-2',
  133.       },
  134.     ],
  135.   },
  136.   {
  137.     id: 3,
  138.     label: 'Level one 3',
  139.     children: [
  140.       {
  141.         id: 7,
  142.         label: 'Level two 3-1',
  143.       },
  144.       {
  145.         id: 8,
  146.         label: 'Level two 3-2',
  147.       },
  148.     ],
  149.   },
  150. ])
  151. </script>
  153. <style>
  154. .custom-tree-node {
  155.   flex: 1;
  156.   display: flex;
  157.   align-items: center;
  158.   justify-content: space-between;
  159.   font-size: 14px;
  160.   padding-right: 8px;
  161. }
  162. </style>

自定义节点类名

节点的类名支持自定义。

使用 props.class 来建立节点的类名。

Tree 树形控件 - 图8

  1. <template>
  2.   <div class="custom-tree-node-container">
  3.     <el-tree
  4.       :data="data"
  5.       show-checkbox
  6.       node-key="id"
  7.       default-expand-all
  8.       :expand-on-click-node="false"
  9.       :props="{ class: customNodeClass }"
  10.     />
  11.   </div>
  12. </template>
  14. <script lang="ts" setup>
  15. import type Node from 'element-plus/es/components/tree/src/model/node'
  17. interface Tree {
  18.   id: number
  19.   label: string
  20.   isPenultimate?: boolean
  21.   children?: Tree[]
  22. }
  24. const customNodeClass = (data: Tree, node: Node) => {
  25.   if (data.isPenultimate) {
  26.     return 'is-penultimate'
  27.   }
  28.   return null
  29. }
  31. const data: Tree[] = [
  32.   {
  33.     id: 1,
  34.     label: 'Level one 1',
  35.     children: [
  36.       {
  37.         id: 4,
  38.         label: 'Level two 1-1',
  39.         isPenultimate: true,
  40.         children: [
  41.           {
  42.             id: 9,
  43.             label: 'Level three 1-1-1',
  44.           },
  45.           {
  46.             id: 10,
  47.             label: 'Level three 1-1-2',
  48.           },
  49.         ],
  50.       },
  51.     ],
  52.   },
  53.   {
  54.     id: 2,
  55.     label: 'Level one 2',
  56.     isPenultimate: true,
  57.     children: [
  58.       {
  59.         id: 5,
  60.         label: 'Level two 2-1',
  61.       },
  62.       {
  63.         id: 6,
  64.         label: 'Level two 2-2',
  65.       },
  66.     ],
  67.   },
  68.   {
  69.     id: 3,
  70.     label: 'Level one 3',
  71.     isPenultimate: true,
  72.     children: [
  73.       {
  74.         id: 7,
  75.         label: 'Level two 3-1',
  76.       },
  77.       {
  78.         id: 8,
  79.         label: 'Level two 3-2',
  80.       },
  81.     ],
  82.   },
  83. ]
  84. </script>
  86. <style>
  87. .is-penultimate > .el-tree-node__content {
  88.   color: #626aef;
  89. }
  91. .el-tree-node.is-expanded.is-penultimate > .el-tree-node__children {
  92.   display: flex;
  93.   flex-direction: row;
  94. }
  95. .is-penultimate > .el-tree-node__children > div {
  96.   width: 25%;
  97. }
  98. </style>

树节点过滤

树节点是可以被过滤的

调用 Tree 实例对象的 filter 方法来过滤树节点。 方法的参数就是过滤关键字。 需要注意的是，此时需要设置 filter-node-method 属性，其值为过滤函数。

Tree 树形控件 - 图9

  1. <template>
  2.   <el-input v-model="filterText" placeholder="Filter keyword" />
  4.   <el-tree
  5.     ref="treeRef"
  6.     class="filter-tree"
  7.     :data="data"
  8.     :props="defaultProps"
  9.     default-expand-all
  10.     :filter-node-method="filterNode"
  11.   />
  12. </template>
  14. <script lang="ts" setup>
  15. import { ref, watch } from 'vue'
  16. import { ElTree } from 'element-plus'
  18. interface Tree {
  19.   id: number
  20.   label: string
  21.   children?: Tree[]
  22. }
  24. const filterText = ref('')
  25. const treeRef = ref<InstanceType<typeof ElTree>>()
  27. const defaultProps = {
  28.   children: 'children',
  29.   label: 'label',
  30. }
  32. watch(filterText, (val) => {
  33.   treeRef.value!.filter(val)
  34. })
  36. const filterNode = (value: string, data: Tree) => {
  37.   if (!value) return true
  38.   return data.label.includes(value)
  39. }
  41. const data: Tree[] = [
  42.   {
  43.     id: 1,
  44.     label: 'Level one 1',
  45.     children: [
  46.       {
  47.         id: 4,
  48.         label: 'Level two 1-1',
  49.         children: [
  50.           {
  51.             id: 9,
  52.             label: 'Level three 1-1-1',
  53.           },
  54.           {
  55.             id: 10,
  56.             label: 'Level three 1-1-2',
  57.           },
  58.         ],
  59.       },
  60.     ],
  61.   },
  62.   {
  63.     id: 2,
  64.     label: 'Level one 2',
  65.     children: [
  66.       {
  67.         id: 5,
  68.         label: 'Level two 2-1',
  69.       },
  70.       {
  71.         id: 6,
  72.         label: 'Level two 2-2',
  73.       },
  74.     ],
  75.   },
  76.   {
  77.     id: 3,
  78.     label: 'Level one 3',
  79.     children: [
  80.       {
  81.         id: 7,
  82.         label: 'Level two 3-1',
  83.       },
  84.       {
  85.         id: 8,
  86.         label: 'Level two 3-2',
  87.       },
  88.     ],
  89.   },
  90. ]
  91. </script>

手风琴模式

对于同一级的节点，每次只能展开一个

Tree 树形控件 - 图10

  1. <template>
  2.   <el-tree
  3.     :data="data"
  4.     :props="defaultProps"
  5.     accordion
  6.     @node-click="handleNodeClick"
  7.   />
  8. </template>
  10. <script lang="ts" setup>
  11. interface Tree {
  12.   label: string
  13.   children?: Tree[]
  14. }
  16. const handleNodeClick = (data: Tree) => {
  17.   console.log(data)
  18. }
  20. const data: Tree[] = [
  21.   {
  22.     label: 'Level one 1',
  23.     children: [
  24.       {
  25.         label: 'Level two 1-1',
  26.         children: [
  27.           {
  28.             label: 'Level three 1-1-1',
  29.           },
  30.         ],
  31.       },
  32.     ],
  33.   },
  34.   {
  35.     label: 'Level one 2',
  36.     children: [
  37.       {
  38.         label: 'Level two 2-1',
  39.         children: [
  40.           {
  41.             label: 'Level three 2-1-1',
  42.           },
  43.         ],
  44.       },
  45.       {
  46.         label: 'Level two 2-2',
  47.         children: [
  48.           {
  49.             label: 'Level three 2-2-1',
  50.           },
  51.         ],
  52.       },
  53.     ],
  54.   },
  55.   {
  56.     label: 'Level one 3',
  57.     children: [
  58.       {
  59.         label: 'Level two 3-1',
  60.         children: [
  61.           {
  62.             label: 'Level three 3-1-1',
  63.           },
  64.         ],
  65.       },
  66.       {
  67.         label: 'Level two 3-2',
  68.         children: [
  69.           {
  70.             label: 'Level three 3-2-1',
  71.           },
  72.         ],
  73.       },
  74.     ],
  75.   },
  76. ]
  77. const defaultProps = {
  78.   children: 'children',
  79.   label: 'label',
  80. }
  81. </script>

可拖拽节点

通过 draggable 属性可让节点变为可拖拽

Tree 树形控件 - 图11

  1. <template>
  2.   <el-tree
  3.     :allow-drop="allowDrop"
  4.     :allow-drag="allowDrag"
  5.     :data="data"
  6.     draggable
  7.     default-expand-all
  8.     node-key="id"
  9.     @node-drag-start="handleDragStart"
  10.     @node-drag-enter="handleDragEnter"
  11.     @node-drag-leave="handleDragLeave"
  12.     @node-drag-over="handleDragOver"
  13.     @node-drag-end="handleDragEnd"
  14.     @node-drop="handleDrop"
  15.   />
  16. </template>
  18. <script lang="ts" setup>
  19. import type Node from 'element-plus/es/components/tree/src/model/node'
  20. import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
  21. import type { DropType } from 'element-plus/es/components/tree/src/tree.type'
  23. const handleDragStart = (node: Node, ev: DragEvents) => {
  24.   console.log('drag start', node)
  25. }
  26. const handleDragEnter = (
  27.   draggingNode: Node,
  28.   dropNode: Node,
  29.   ev: DragEvents
  30. ) => {
  31.   console.log('tree drag enter:', dropNode.label)
  32. }
  33. const handleDragLeave = (
  34.   draggingNode: Node,
  35.   dropNode: Node,
  36.   ev: DragEvents
  37. ) => {
  38.   console.log('tree drag leave:', dropNode.label)
  39. }
  40. const handleDragOver = (draggingNode: Node, dropNode: Node, ev: DragEvents) => {
  41.   console.log('tree drag over:', dropNode.label)
  42. }
  43. const handleDragEnd = (
  44.   draggingNode: Node,
  45.   dropNode: Node,
  46.   dropType: DropType,
  47.   ev: DragEvents
  48. ) => {
  49.   console.log('tree drag end:', dropNode && dropNode.label, dropType)
  50. }
  51. const handleDrop = (
  52.   draggingNode: Node,
  53.   dropNode: Node,
  54.   dropType: DropType,
  55.   ev: DragEvents
  56. ) => {
  57.   console.log('tree drop:', dropNode.label, dropType)
  58. }
  59. const allowDrop = (draggingNode: Node, dropNode: Node, type: DropType) => {
  60.   if (dropNode.data.label === 'Level two 3-1') {
  61.     return type !== 'inner'
  62.   } else {
  63.     return true
  64.   }
  65. }
  66. const allowDrag = (draggingNode: Node) => {
  67.   return !draggingNode.data.label.includes('Level three 3-1-1')
  68. }
  70. const data = [
  71.   {
  72.     label: 'Level one 1',
  73.     children: [
  74.       {
  75.         label: 'Level two 1-1',
  76.         children: [
  77.           {
  78.             label: 'Level three 1-1-1',
  79.           },
  80.         ],
  81.       },
  82.     ],
  83.   },
  84.   {
  85.     label: 'Level one 2',
  86.     children: [
  87.       {
  88.         label: 'Level two 2-1',
  89.         children: [
  90.           {
  91.             label: 'Level three 2-1-1',
  92.           },
  93.         ],
  94.       },
  95.       {
  96.         label: 'Level two 2-2',
  97.         children: [
  98.           {
  99.             label: 'Level three 2-2-1',
  100.           },
  101.         ],
  102.       },
  103.     ],
  104.   },
  105.   {
  106.     label: 'Level one 3',
  107.     children: [
  108.       {
  109.         label: 'Level two 3-1',
  110.         children: [
  111.           {
  112.             label: 'Level three 3-1-1',
  113.           },
  114.         ],
  115.       },
  116.       {
  117.         label: 'Level two 3-2',
  118.         children: [
  119.           {
  120.             label: 'Level three 3-2-1',
  121.           },
  122.         ],
  123.       },
  124.     ],
  125.   },
  126. ]
  127. </script>

属性

属性说明类型可选值默认值
data展示数据array——
empty-text内容为空的时候展示的文本string——
node-key每个树节点用来作为唯一标识的属性，整棵树应该是唯一的string——
props配置选项，具体看下表object——
render-after-expand是否在第一次展开某个树节点后才渲染其子节点boolean—true
load加载子树数据的方法，仅当 lazy 属性为true 时生效function(node, resolve)，node为当前点击的节点，resolve为数据加载完成的回调(必须调用)——
render-content树节点的内容区的渲染 FunctionFunction(h, { node, data, store })——
highlight-current是否高亮当前选中节点，默认值是 false。boolean—false
default-expand-all是否默认展开所有节点boolean—false
expand-on-click-node是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。boolean—true
check-on-click-node是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。boolean—false
auto-expand-parent展开子节点的时候是否自动展开父节点boolean—true
default-expanded-keys默认展开的节点的 key 的数组array——
show-checkbox节点是否可被选择boolean—false
check-strictly在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 falseboolean—false
default-checked-keys默认勾选的节点的 key 的数组array——
current-node-key当前选中的节点string, number——
filter-node-method对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏Function(value, data, node)——
accordion是否每次只打开一个同级树节点展开boolean—false
indent相邻级节点间的水平缩进，单位为像素number—16
icon自定义图标组件string | Component--
lazy是否懒加载子节点，需与 load 方法结合使用boolean—false
draggable是否开启拖拽节点功能boolean—false
allow-drag判断节点能否被拖拽 如果返回 false ，节点不能被拖动Function(node)——
allow-drop拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：’prev’、’inner’ 和 ‘next’，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后Function(draggingNode, dropNode, type)——

Props

Props说明类型可选值默认值
label指定节点标签为节点对象的某个属性值string, function(data, node)——
children指定子树为节点对象的某个属性值string——
disabled指定节点选择框是否禁用为节点对象的某个属性值string, function(data, node)——
isLeaf指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效string, function(data, node)——
class自定义节点类名string, function(data, node)——

方法

Tree 组件有以下方法，均返回当前选中的节点数组

方法描述参数
filter过滤所有树节点，过滤后的节点将被隐藏接收一个参数并指定为 filter-node-method 属性的第一个参数
updateKeyChildren为节点设置新数据，只有当设置 node-key 属性的时候才可用(key, data) 接收两个参数: 1. 节点的 key 2. 新数据
getCheckedNodes如果节点可以被选中，(show-checkbox 为 true), 本方法将返回当前选中节点的数组(leafOnly, includeHalfChecked) 接收两个布尔类型参数: 1. 默认值为 false. 若参数为 true, 它将返回当前选中节点的子节点 2. 默认值为 false. 如果参数为 true, 返回值包含半选中节点数据
setCheckedNodes设置目前勾选的节点，使用此方法必须提前设置 node-key 属性要选中的节点构成的数组
getCheckedKeys若节点可用被选中 (show-checkbox 为 true), 它将返回当前选中节点 key 的数组(leafOnly) 接收一个布尔类型参数，默认为 false. 如果参数是 true, 它只返回当前选择的子节点数组。
setCheckedKeys设置目前选中的节点，使用此方法必须设置 node-key 属性(keys, leafOnly) 接收两个参数: 1. 一个需要被选中的多节点 key 的数组 2. 一个布尔类型参数，默认为 false. 如果参数是 true, 它只返回当前选择的子节点数组。
setChecked设置节点是否被选中, 使用此方法必须设置 node-key 属性(key/data, checked, deep) 接收三个参数: 1. 要选中的节点的 key 或者数据 2. 一个布尔类型参数表明是否选中. 3. 一个布尔类型参数表明是否递归选中子节点
getHalfCheckedNodes如果节点可用被选中 (show-checkbox 为 true), 它将返回当前半选中的节点组成的数组-
getHalfCheckedKeys若节点可被选中(show-checkbox 为 true)，则返回目前半选中的节点的 key 所组成的数组-
getCurrentKey返回当前被选中节点的数据 (如果没有则返回 null)—
getCurrentNode返回当前被选中节点的数据 (如果没有则返回 null)—
setCurrentKey通过 key 设置某个节点的当前选中状态，使用此方法必须设置 node-key 属性(key, shouldAutoExpandParent=true) 1. 待被选节点的 key， 如果为 null, 取消当前选中的节点 2. 是否自动展开父节点
setCurrentNode设置节点为选中状态，使用此方法必须设置 node-key 属性(node, shouldAutoExpandParent=true) 1. 待被选中的节点 2. 是否展开父节点
getNode根据 data 或者 key 拿到 Tree 组件中的 node(data) 节点的 data 或 key
remove删除 Tree 中的一个节点，使用此方法必须设置 node-key 属性(data) 要删除的节点的 data 或者 node 对象
append为 Tree 中的一个节点追加一个子节点(data, parentNode) 1. 要追加的子节点的 data 2. 父节点的 data, key 或 node
insertBefore在 Tree 中给定节点前插入一个节点(data, refNode) 1. 要增加的节点的 data 2. 参考节点的 data, key 或 node
insertAfter在 Tree 中给定节点后插入一个节点(data, refNode) 1. 要增加的节点的 data 2. 参考节点的 data, key 或 node

事件

事件名说明回调参数
node-click当节点被点击的时候触发四个参数：对应于节点点击的节点对象，TreeNode 的 node 属性, TreeNode和事件对象
node-contextmenu当某一节点被鼠标右键点击时会触发该事件共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
check-change当复选框被点击的时候触发共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点
check点击节点复选框之后触发共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性
current-change当前选中节点变化时触发的事件共两个参数，依次为：当前节点的数据，当前节点的 Node 对象
node-expand节点被展开时触发的事件共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse节点被关闭时触发的事件共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-drag-start节点开始拖拽时触发的事件共两个参数，依次为：被拖拽节点对应的 Node、event
node-drag-enter拖拽进入其他节点时触发的事件共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event
node-drag-leave拖拽离开某个节点时触发的事件共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event
node-drag-over在拖拽节点时触发的事件（类似浏览器的 mouseover 事件）共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event
node-drag-end拖拽结束时（可能未成功）触发的事件共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event
node-drop拖拽成功完成时触发的事件共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event

插槽

插槽名说明
—自定义树节点的内容， 自定义树节点的内容， 参数为 { node, data }

源代码

组件 Tree 树形控件 - 图12 • 文档 Tree 树形控件 - 图13

贡献者

Tree 树形控件 - 图14 三咲智子

Tree 树形控件 - 图15 云游君

Tree 树形控件 - 图16 jeremywu

Tree 树形控件 - 图17 Xc

Tree 树形控件 - 图18 zz

Tree 树形控件 - 图19 LIUCHAO

Tree 树形控件 - 图20 msidolphin

Tree 树形控件 - 图21 Aex

Tree 树形控件 - 图22 Delyan Haralanov

Tree 树形控件 - 图23 啝裳

Tree 树形控件 - 图24 C.Y.Kun

Tree 树形控件 - 图25 zhiyuanzmj

Tree 树形控件 - 图26 jarven

Tree 树形控件 - 图27 Zhongxiang Wang

Tree 树形控件 - 图28 opengraphica

Tree 树形控件 - 图29 bqy

Tree 树形控件 - 图30 Alan Wang

Tree 树形控件 - 图31 ElsaOOo

Tree 树形控件 - 图32 Herrington Darkholme

Tree 树形控件 - 图33 Greper

Tree 树形控件 - 图34 SongWuKong

Tree 树形控件 - 图35 deepthan

Tree 树形控件 - 图36 on the field of hope

Tree 树形控件 - 图37 zazzaz

Tree 树形控件 - 图38 Hades-li

Tree 树形控件 - 图39 renovate[bot]

Tree 树形控件 - 图40 Chen_Z