TreeSelect 树形选择

含有下拉菜单的树形选择器，结合了 el-tree 和 el-select 两个组件的功能。

基础用法

树状选择器

TreeSelect 树形选择 2.1.8 - 图1

  1. <template>
  2.   <el-tree-select v-model="value" :data="data" :render-after-expand="false" />
  3.   <el-divider />
  4.   show checkbox:
  5.   <el-tree-select
  6.     v-model="value"
  7.     :data="data"
  8.     :render-after-expand="false"
  9.     show-checkbox
  10.   />
  11. </template>
  13. <script lang="ts" setup>
  14. import { ref } from 'vue'
  16. const value = ref()
  18. const data = [
  19.   {
  20.     value: '1',
  21.     label: 'Level one 1',
  22.     children: [
  23.       {
  24.         value: '1-1',
  25.         label: 'Level two 1-1',
  26.         children: [
  27.           {
  28.             value: '1-1-1',
  29.             label: 'Level three 1-1-1',
  30.           },
  31.         ],
  32.       },
  33.     ],
  34.   },
  35.   {
  36.     value: '2',
  37.     label: 'Level one 2',
  38.     children: [
  39.       {
  40.         value: '2-1',
  41.         label: 'Level two 2-1',
  42.         children: [
  43.           {
  44.             value: '2-1-1',
  45.             label: 'Level three 2-1-1',
  46.           },
  47.         ],
  48.       },
  49.       {
  50.         value: '2-2',
  51.         label: 'Level two 2-2',
  52.         children: [
  53.           {
  54.             value: '2-2-1',
  55.             label: 'Level three 2-2-1',
  56.           },
  57.         ],
  58.       },
  59.     ],
  60.   },
  61.   {
  62.     value: '3',
  63.     label: 'Level one 3',
  64.     children: [
  65.       {
  66.         value: '3-1',
  67.         label: 'Level two 3-1',
  68.         children: [
  69.           {
  70.             value: '3-1-1',
  71.             label: 'Level three 3-1-1',
  72.           },
  73.         ],
  74.       },
  75.       {
  76.         value: '3-2',
  77.         label: 'Level two 3-2',
  78.         children: [
  79.           {
  80.             value: '3-2-1',
  81.             label: 'Level three 3-2-1',
  82.           },
  83.         ],
  84.       },
  85.     ],
  86.   },
  87. ]
  88. </script>

TIP

由于 render-after-expand 属性是默认开启的，所选择的标签名可能不会及时更新显示，您可以把该属性设置为 false 来显示正确的名称

选择任意级别

当属性 check-strictly=true 时，任何节点都可以被选择，否则只有子节点可被选择。

TreeSelect 树形选择 2.1.8 - 图2

  1. <template>
  2.   <el-tree-select
  3.     v-model="value"
  4.     :data="data"
  5.     check-strictly
  6.     :render-after-expand="false"
  7.   />
  8.   <el-divider />
  9.   show checkbox(only click checkbox to select):
  10.   <el-tree-select
  11.     v-model="value"
  12.     :data="data"
  13.     check-strictly
  14.     :render-after-expand="false"
  15.     show-checkbox
  16.   />
  17.   <el-divider />
  18.   show checkbox with `check-on-click-node`:
  19.   <el-tree-select
  20.     v-model="value"
  21.     :data="data"
  22.     check-strictly
  23.     :render-after-expand="false"
  24.     show-checkbox
  25.     check-on-click-node
  26.   />
  27. </template>
  29. <script lang="ts" setup>
  30. import { ref } from 'vue'
  32. const value = ref()
  34. const data = [
  35.   {
  36.     value: '1',
  37.     label: 'Level one 1',
  38.     children: [
  39.       {
  40.         value: '1-1',
  41.         label: 'Level two 1-1',
  42.         children: [
  43.           {
  44.             value: '1-1-1',
  45.             label: 'Level three 1-1-1',
  46.           },
  47.         ],
  48.       },
  49.     ],
  50.   },
  51.   {
  52.     value: '2',
  53.     label: 'Level one 2',
  54.     children: [
  55.       {
  56.         value: '2-1',
  57.         label: 'Level two 2-1',
  58.         children: [
  59.           {
  60.             value: '2-1-1',
  61.             label: 'Level three 2-1-1',
  62.           },
  63.         ],
  64.       },
  65.       {
  66.         value: '2-2',
  67.         label: 'Level two 2-2',
  68.         children: [
  69.           {
  70.             value: '2-2-1',
  71.             label: 'Level three 2-2-1',
  72.           },
  73.         ],
  74.       },
  75.     ],
  76.   },
  77.   {
  78.     value: '3',
  79.     label: 'Level one 3',
  80.     children: [
  81.       {
  82.         value: '3-1',
  83.         label: 'Level two 3-1',
  84.         children: [
  85.           {
  86.             value: '3-1-1',
  87.             label: 'Level three 3-1-1',
  88.           },
  89.         ],
  90.       },
  91.       {
  92.         value: '3-2',
  93.         label: 'Level two 3-2',
  94.         children: [
  95.           {
  96.             value: '3-2-1',
  97.             label: 'Level three 3-2-1',
  98.           },
  99.         ],
  100.       },
  101.     ],
  102.   },
  103. ]
  104. </script>

TIP

当使用 show-checkbox时，由于 check-on-click-node 默认值是 false，这时候只能通过 checkbox 来选中，当然您也可以将其设置成 true，这样点击整个 node 都可以用来完成选择

多选

通过点击或复选框选择多个选项。

TreeSelect 树形选择 2.1.8 - 图3

  1. <template>
  2.   <el-tree-select
  3.     v-model="value"
  4.     :data="data"
  5.     multiple
  6.     :render-after-expand="false"
  7.   />
  8.   <el-divider />
  9.   show checkbox:
  10.   <el-tree-select
  11.     v-model="value"
  12.     :data="data"
  13.     multiple
  14.     :render-after-expand="false"
  15.     show-checkbox
  16.   />
  17.   <el-divider />
  18.   show checkbox with `check-strictly`:
  19.   <el-tree-select
  20.     v-model="valueStrictly"
  21.     :data="data"
  22.     multiple
  23.     :render-after-expand="false"
  24.     show-checkbox
  25.     check-strictly
  26.     check-on-click-node
  27.   />
  28. </template>
  30. <script lang="ts" setup>
  31. import { ref } from 'vue'
  33. const value = ref()
  34. const valueStrictly = ref()
  36. const data = [
  37.   {
  38.     value: '1',
  39.     label: 'Level one 1',
  40.     children: [
  41.       {
  42.         value: '1-1',
  43.         label: 'Level two 1-1',
  44.         children: [
  45.           {
  46.             value: '1-1-1',
  47.             label: 'Level three 1-1-1',
  48.           },
  49.         ],
  50.       },
  51.     ],
  52.   },
  53.   {
  54.     value: '2',
  55.     label: 'Level one 2',
  56.     children: [
  57.       {
  58.         value: '2-1',
  59.         label: 'Level two 2-1',
  60.         children: [
  61.           {
  62.             value: '2-1-1',
  63.             label: 'Level three 2-1-1',
  64.           },
  65.         ],
  66.       },
  67.       {
  68.         value: '2-2',
  69.         label: 'Level two 2-2',
  70.         children: [
  71.           {
  72.             value: '2-2-1',
  73.             label: 'Level three 2-2-1',
  74.           },
  75.         ],
  76.       },
  77.     ],
  78.   },
  79.   {
  80.     value: '3',
  81.     label: 'Level one 3',
  82.     children: [
  83.       {
  84.         value: '3-1',
  85.         label: 'Level two 3-1',
  86.         children: [
  87.           {
  88.             value: '3-1-1',
  89.             label: 'Level three 3-1-1',
  90.           },
  91.         ],
  92.       },
  93.       {
  94.         value: '3-2',
  95.         label: 'Level two 3-2',
  96.         children: [
  97.           {
  98.             value: '3-2-1',
  99.             label: 'Level three 3-2-1',
  100.           },
  101.         ],
  102.       },
  103.     ],
  104.   },
  105. ]
  106. </script>

禁用选项

使用 disabled 字段禁用选项。

TreeSelect 树形选择 2.1.8 - 图4

  1. <template>
  2.   <el-tree-select v-model="value" :data="data" />
  3. </template>
  5. <script lang="ts" setup>
  6. import { ref } from 'vue'
  8. const value = ref()
  10. const data = [
  11.   {
  12.     value: '1',
  13.     label: 'Level one 1',
  14.     disabled: true,
  15.     children: [
  16.       {
  17.         value: '1-1',
  18.         label: 'Level two 1-1',
  19.         disabled: true,
  20.         children: [
  21.           {
  22.             disabled: true,
  23.             value: '1-1-1',
  24.             label: 'Level three 1-1-1',
  25.           },
  26.         ],
  27.       },
  28.     ],
  29.   },
  30.   {
  31.     value: '2',
  32.     label: 'Level one 2',
  33.     children: [
  34.       {
  35.         value: '2-1',
  36.         label: 'Level two 2-1',
  37.         children: [
  38.           {
  39.             value: '2-1-1',
  40.             label: 'Level three 2-1-1',
  41.           },
  42.         ],
  43.       },
  44.       {
  45.         value: '2-2',
  46.         label: 'Level two 2-2',
  47.         children: [
  48.           {
  49.             value: '2-2-1',
  50.             label: 'Level three 2-2-1',
  51.           },
  52.         ],
  53.       },
  54.     ],
  55.   },
  56.   {
  57.     value: '3',
  58.     label: 'Level one 3',
  59.     children: [
  60.       {
  61.         value: '3-1',
  62.         label: 'Level two 3-1',
  63.         children: [
  64.           {
  65.             value: '3-1-1',
  66.             label: 'Level three 3-1-1',
  67.           },
  68.         ],
  69.       },
  70.       {
  71.         value: '3-2',
  72.         label: 'Level two 3-2',
  73.         children: [
  74.           {
  75.             value: '3-2-1',
  76.             label: 'Level three 3-2-1',
  77.           },
  78.         ],
  79.       },
  80.     ],
  81.   },
  82. ]
  83. </script>

可筛选

使用关键字筛选或自定义筛选方法。 filterMethod可以自定义数据筛选的方法， filterNodeMethod可以自定义节点数据筛选的方法。

TreeSelect 树形选择 2.1.8 - 图5

  1. <template>
  2.   <el-tree-select v-model="value" :data="data" filterable />
  3.   <el-divider />
  4.   filter method:
  5.   <el-tree-select
  6.     v-model="value"
  7.     :data="data"
  8.     :filter-method="filterMethod"
  9.     filterable
  10.   />
  11.   <el-divider />
  12.   filter node method:
  13.   <el-tree-select
  14.     v-model="value"
  15.     :data="data"
  16.     :filter-node-method="filterNodeMethod"
  17.     filterable
  18.   />
  19. </template>
  21. <script lang="ts" setup>
  22. import { ref } from 'vue'
  24. const value = ref()
  26. const sourceData = [
  27.   {
  28.     value: '1',
  29.     label: 'Level one 1',
  30.     children: [
  31.       {
  32.         value: '1-1',
  33.         label: 'Level two 1-1',
  34.         children: [
  35.           {
  36.             value: '1-1-1',
  37.             label: 'Level three 1-1-1',
  38.           },
  39.         ],
  40.       },
  41.     ],
  42.   },
  43.   {
  44.     value: '2',
  45.     label: 'Level one 2',
  46.     children: [
  47.       {
  48.         value: '2-1',
  49.         label: 'Level two 2-1',
  50.         children: [
  51.           {
  52.             value: '2-1-1',
  53.             label: 'Level three 2-1-1',
  54.           },
  55.         ],
  56.       },
  57.       {
  58.         value: '2-2',
  59.         label: 'Level two 2-2',
  60.         children: [
  61.           {
  62.             value: '2-2-1',
  63.             label: 'Level three 2-2-1',
  64.           },
  65.         ],
  66.       },
  67.     ],
  68.   },
  69.   {
  70.     value: '3',
  71.     label: 'Level one 3',
  72.     children: [
  73.       {
  74.         value: '3-1',
  75.         label: 'Level two 3-1',
  76.         children: [
  77.           {
  78.             value: '3-1-1',
  79.             label: 'Level three 3-1-1',
  80.           },
  81.         ],
  82.       },
  83.       {
  84.         value: '3-2',
  85.         label: 'Level two 3-2',
  86.         children: [
  87.           {
  88.             value: '3-2-1',
  89.             label: 'Level three 3-2-1',
  90.           },
  91.         ],
  92.       },
  93.     ],
  94.   },
  95. ]
  96. const data = ref(sourceData)
  98. const filterMethod = (value) => {
  99.   data.value = [...sourceData].filter((item) => item.label.includes(value))
  100. }
  102. const filterNodeMethod = (value, data) => data.label.includes(value)
  103. </script>

自定义内容

自定义树节点的内容。

TreeSelect 树形选择 2.1.8 - 图6

  1. <template>
  2.   <el-tree-select v-model="value" :data="data">
  3.     <template #default="{ data: { label } }">
  4.       {{ label }}<span style="color: gray">(suffix)</span></template
  5.     >
  6.   </el-tree-select>
  7.   <el-divider />
  8.   use render content:
  9.   <el-tree-select
  10.     v-model="value"
  11.     :data="data"
  12.     :render-content="renderContent"
  13.   />
  14. </template>
  16. <script lang="ts" setup>
  17. import { ref } from 'vue'
  19. const value = ref()
  21. const renderContent = (h, { data }) => {
  22.   return h(
  23.     'span',
  24.     {
  25.       style: {
  26.         color: '#626AEF',
  27.       },
  28.     },
  29.     data.label
  30.   )
  31. }
  33. const data = [
  34.   {
  35.     value: '1',
  36.     label: 'Level one 1',
  37.     children: [
  38.       {
  39.         value: '1-1',
  40.         label: 'Level two 1-1',
  41.         children: [
  42.           {
  43.             value: '1-1-1',
  44.             label: 'Level three 1-1-1',
  45.           },
  46.         ],
  47.       },
  48.     ],
  49.   },
  50.   {
  51.     value: '2',
  52.     label: 'Level one 2',
  53.     children: [
  54.       {
  55.         value: '2-1',
  56.         label: 'Level two 2-1',
  57.         children: [
  58.           {
  59.             value: '2-1-1',
  60.             label: 'Level three 2-1-1',
  61.           },
  62.         ],
  63.       },
  64.       {
  65.         value: '2-2',
  66.         label: 'Level two 2-2',
  67.         children: [
  68.           {
  69.             value: '2-2-1',
  70.             label: 'Level three 2-2-1',
  71.           },
  72.         ],
  73.       },
  74.     ],
  75.   },
  76.   {
  77.     value: '3',
  78.     label: 'Level one 3',
  79.     children: [
  80.       {
  81.         value: '3-1',
  82.         label: 'Level two 3-1',
  83.         children: [
  84.           {
  85.             value: '3-1-1',
  86.             label: 'Level three 3-1-1',
  87.           },
  88.         ],
  89.       },
  90.       {
  91.         value: '3-2',
  92.         label: 'Level two 3-2',
  93.         children: [
  94.           {
  95.             value: '3-2-1',
  96.             label: 'Level three 3-2-1',
  97.           },
  98.         ],
  99.       },
  100.     ],
  101.   },
  102. ]
  103. </script>

懒加载

树节点懒加载，更加适合于数据量大的列表。

TreeSelect 树形选择 2.1.8 - 图7

  1. <template>
  2.   <el-tree-select v-model="value" lazy :load="load" :props="props" />
  3. </template>
  5. <script lang="ts" setup>
  6. import { ref } from 'vue'
  8. const value = ref()
  10. const props = {
  11.   label: 'label',
  12.   children: 'children',
  13.   isLeaf: 'isLeaf',
  14. }
  16. let id = 0
  18. const load = (node, resolve) => {
  19.   if (node.isLeaf) return resolve([])
  21.   setTimeout(() => {
  22.     resolve([
  23.       {
  24.         value: ++id,
  25.         label: `lazy load node${id}`,
  26.       },
  27.       {
  28.         value: ++id,
  29.         label: `lazy load node${id}`,
  30.         isLeaf: true,
  31.       },
  32.     ])
  33.   }, 400)
  34. }
  35. </script>

TreeSelect 属性

由于这个组件是el-tree和el-select的结合体，他们的原始属性未被更改，故不在此重复。请跳转查看原组件的相应文档。

属性方法事件插槽
treetreetreetree
selectselectselectselect

源代码

组件 TreeSelect 树形选择 2.1.8 - 图8 • 文档 TreeSelect 树形选择 2.1.8 - 图9

贡献者

TreeSelect 树形选择 2.1.8 - 图10 yujinpan

TreeSelect 树形选择 2.1.8 - 图11 Xc

TreeSelect 树形选择 2.1.8 - 图12 三咲智子

TreeSelect 树形选择 2.1.8 - 图13 zz

TreeSelect 树形选择 2.1.8 - 图14 opengraphica

TreeSelect 树形选择 2.1.8 - 图15 Delyan Haralanov

TreeSelect 树形选择 2.1.8 - 图16 Zhongxiang Wang

TreeSelect 树形选择 2.1.8 - 图17 Wu Chengyu

TreeSelect 树形选择 2.1.8 - 图18 云游君