树型选择控件

何时使用

类似 Select 的选择控件,可选择的数据结构是一个树形结构时,可以使用 TreeSelect,例如公司层级、学科系统、分类目录等等。

代码演示

Please selectTreeSelect树选择 - 图1

基本用法

最简单的用法。

  1. <template>
  2. <a-tree-select
  3. v-model="value"
  4. show-search
  5. style="width: 100%"
  6. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  7. placeholder="Please select"
  8. allow-clear
  9. tree-default-expand-all
  10. >
  11. <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
  12. <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
  13. <a-tree-select-node key="random" :selectable="false" value="leaf1" title="my leaf" />
  14. <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
  15. </a-tree-select-node>
  16. <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
  17. <a-tree-select-node key="random3" value="sss">
  18. <b slot="title" style="color: #08c">sss</b>
  19. </a-tree-select-node>
  20. </a-tree-select-node>
  21. </a-tree-select-node>
  22. </a-tree-select>
  23. </template>
  24. <script>
  25. export default {
  26. data() {
  27. return {
  28. treeExpandedKeys: [],
  29. value: undefined,
  30. };
  31. },
  32. };
  33. </script>

Please select

多选

多选的树选择。

  1. <template>
  2. <a-tree-select
  3. show-search
  4. style="width: 100%"
  5. :value="value"
  6. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  7. placeholder="Please select"
  8. allow-clear
  9. multiple
  10. tree-default-expand-all
  11. @change="onChange"
  12. @search="onSearch"
  13. @select="onSelect"
  14. >
  15. <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
  16. <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
  17. <a-tree-select-node key="random" value="leaf1" title="my leaf" />
  18. <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
  19. </a-tree-select-node>
  20. <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
  21. <a-tree-select-node key="random3" value="sss">
  22. <b slot="title" style="color: #08c">sss</b>
  23. </a-tree-select-node>
  24. </a-tree-select-node>
  25. </a-tree-select-node>
  26. </a-tree-select>
  27. </template>
  28. <script>
  29. export default {
  30. data() {
  31. return {
  32. value: undefined,
  33. };
  34. },
  35. methods: {
  36. onChange(value) {
  37. console.log(value);
  38. this.value = value;
  39. },
  40. onSearch() {
  41. console.log(...arguments);
  42. },
  43. onSelect() {
  44. console.log(...arguments);
  45. },
  46. },
  47. };
  48. </script>

Please selectTreeSelect树选择 - 图2

后缀图标

最简单的用法。

  1. <template>
  2. <a-tree-select
  3. v-model="value"
  4. show-search
  5. style="width: 100%"
  6. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  7. placeholder="Please select"
  8. allow-clear
  9. tree-default-expand-all
  10. >
  11. <a-icon slot="suffixIcon" type="smile" />
  12. <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
  13. <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
  14. <a-tree-select-node key="random" value="leaf1" title="my leaf" />
  15. <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
  16. </a-tree-select-node>
  17. <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
  18. <a-tree-select-node key="random3" value="sss">
  19. <b slot="title" style="color: #08c">sss</b>
  20. </a-tree-select-node>
  21. </a-tree-select-node>
  22. </a-tree-select-node>
  23. </a-tree-select>
  24. </template>
  25. <script>
  26. export default {
  27. data() {
  28. return {
  29. value: undefined,
  30. };
  31. },
  32. };
  33. </script>
  • TreeSelect树选择 - 图3Node1

可勾选

使用勾选框实现多选功能。

  1. <template>
  2. <a-tree-select
  3. v-model="value"
  4. style="width: 100%"
  5. :tree-data="treeData"
  6. tree-checkable
  7. :show-checked-strategy="SHOW_PARENT"
  8. search-placeholder="Please select"
  9. />
  10. </template>
  11. <script>
  12. import { TreeSelect } from 'ant-design-vue';
  13. const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  14. const treeData = [
  15. {
  16. title: 'Node1',
  17. value: '0-0',
  18. key: '0-0',
  19. children: [
  20. {
  21. title: 'Child Node1',
  22. value: '0-0-0',
  23. key: '0-0-0',
  24. },
  25. ],
  26. },
  27. {
  28. title: 'Node2',
  29. value: '0-1',
  30. key: '0-1',
  31. children: [
  32. {
  33. title: 'Child Node3',
  34. value: '0-1-0',
  35. key: '0-1-0',
  36. disabled: true,
  37. },
  38. {
  39. title: 'Child Node4',
  40. value: '0-1-1',
  41. key: '0-1-1',
  42. },
  43. {
  44. title: 'Child Node5',
  45. value: '0-1-2',
  46. key: '0-1-2',
  47. },
  48. ],
  49. },
  50. ];
  51. export default {
  52. data() {
  53. return {
  54. value: ['0-0-0'],
  55. treeData,
  56. SHOW_PARENT,
  57. };
  58. },
  59. };
  60. </script>

Please selectTreeSelect树选择 - 图4

从数据直接生成

使用 treeData 把 JSON 数据直接生成树结构。

  1. <template>
  2. <a-tree-select
  3. v-model="value"
  4. style="width: 100%"
  5. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  6. :tree-data="treeData"
  7. placeholder="Please select"
  8. tree-default-expand-all
  9. >
  10. <span v-if="key === '0-0-1'" slot="title" slot-scope="{ key, value }" style="color: #08c">
  11. Child Node1 {{ value }}
  12. </span>
  13. </a-tree-select>
  14. </template>
  15. <script>
  16. const treeData = [
  17. {
  18. title: 'Node1',
  19. value: '0-0',
  20. key: '0-0',
  21. children: [
  22. {
  23. value: '0-0-1',
  24. key: '0-0-1',
  25. scopedSlots: {
  26. // custom title
  27. title: 'title',
  28. },
  29. },
  30. {
  31. title: 'Child Node2',
  32. value: '0-0-2',
  33. key: '0-0-2',
  34. },
  35. ],
  36. },
  37. {
  38. title: 'Node2',
  39. value: '0-1',
  40. key: '0-1',
  41. },
  42. ];
  43. export default {
  44. data() {
  45. return {
  46. value: undefined,
  47. treeData,
  48. };
  49. },
  50. watch: {
  51. value(value) {
  52. console.log(value);
  53. },
  54. },
  55. };
  56. </script>

Please selectTreeSelect树选择 - 图5

异步加载

异步加载树节点。

  1. <template>
  2. <a-tree-select
  3. v-model="value"
  4. tree-data-simple-mode
  5. style="width: 100%"
  6. :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
  7. :tree-data="treeData"
  8. placeholder="Please select"
  9. :load-data="onLoadData"
  10. />
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. value: undefined,
  17. treeData: [
  18. { id: 1, pId: 0, value: '1', title: 'Expand to load' },
  19. { id: 2, pId: 0, value: '2', title: 'Expand to load' },
  20. { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
  21. ],
  22. };
  23. },
  24. watch: {
  25. value(value) {
  26. console.log(value);
  27. },
  28. },
  29. methods: {
  30. genTreeNode(parentId, isLeaf = false) {
  31. const random = Math.random()
  32. .toString(36)
  33. .substring(2, 6);
  34. return {
  35. id: random,
  36. pId: parentId,
  37. value: random,
  38. title: isLeaf ? 'Tree Node' : 'Expand to load',
  39. isLeaf,
  40. };
  41. },
  42. onLoadData(treeNode) {
  43. return new Promise(resolve => {
  44. const { id } = treeNode.dataRef;
  45. setTimeout(() => {
  46. this.treeData = this.treeData.concat([
  47. this.genTreeNode(id, false),
  48. this.genTreeNode(id, true),
  49. ]);
  50. resolve();
  51. }, 300);
  52. });
  53. },
  54. },
  55. };
  56. </script>

API

Tree props

参数说明类型默认值
allowClear显示清除按钮booleanfalse
defaultValue指定默认选中的条目string/string[]-
disabled是否禁用booleanfalse
dropdownClassName下拉菜单的 className 属性string-
dropdownMatchSelectWidth下拉菜单和选择器同宽booleantrue
dropdownStyle下拉菜单的样式object-
filterTreeNode是否根据输入项进行筛选,默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值boolean|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值)Function
getPopupContainer菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。Function(triggerNode)() => document.body
labelInValue是否把每个选项的 label 包装到 value 中,会把 value 类型从 string 变为 {value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式booleanfalse
loadData异步加载数据function(node)-
maxTagCount最多显示多少个 tagnumber-
maxTagPlaceholder隐藏 tag 时显示的内容slot/function(omittedValues)-
multiple支持多选(当设置 treeCheckable 时自动变为 true)booleanfalse
placeholder选择框默认文字string|slot-
searchPlaceholder搜索框默认文字string|slot-
searchValue(.sync)搜索框的值,可以通过 search 事件获取用户输入string-
treeIcon是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式booleanfalse
showCheckedStrategy定义选中项回填的方式。TreeSelect.SHOW_ALL: 显示所有选中节点(包括父节点). TreeSelect.SHOW_PARENT: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点.enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }TreeSelect.SHOW_CHILD
showSearch在下拉中显示搜索框(仅在单选模式下生效)booleanfalse
size选择框大小,可选 large smallstring‘default’
suffixIcon自定义的选择框后缀图标VNode | slot-
treeCheckable显示 checkboxbooleanfalse
treeCheckStrictlycheckable 状态下节点选择完全受控(父子节点选中状态不再关联),会使得 labelInValue 强制为 truebooleanfalse
treeDatatreeNodes 数据,如果设置则不需要手动构造 TreeNode 节点(value 在整个树范围内唯一)array<{value, label, children, [disabled, disableCheckbox, selectable]}>[]
treeDataSimpleMode使用简单格式的 treeData,具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:’1’, label:”test1”,…},…], pId 是父节点的 id)false|Array<{ id: string, pId: string, rootPId: null }>false
treeDefaultExpandAll默认展开所有树节点booleanfalse
treeDefaultExpandedKeys默认展开的树节点string[] | number[]-
treeExpandedKeys(.sync)设置展开的树节点string[] | number[]-
treeNodeFilterProp输入项过滤对应的 treeNode 属性string‘value’
treeNodeLabelProp作为显示的 prop 设置string‘title’
value(v-model)指定当前选中的条目string/string[]-

事件

事件名称说明回调参数
change选中树节点时调用此函数function(value, label, extra)
search文本框值变化时回调function(value: string)
select被选中时调用function(value, node, extra)
treeExpand展开节点时调用function(expandedKeys)

Tree 方法

名称描述
blur()移除焦点
focus()获取焦点

TreeNode props

建议使用 treeData 来代替 TreeNode,免去手工构造麻烦

参数说明类型默认值版本
selectable是否可选booleantrue
checkable当树为 checkable 时,设置独立节点是否展示 Checkboxboolean-1.5.0
disableCheckbox禁掉 checkboxbooleanfalse
disabled是否禁用booleanfalse
isLeaf是否是叶子节点booleanfalse
key此项必须设置(其值在整个树范围内唯一)string | number-
title树节点显示的内容string|slot‘—-‘
value默认根据此属性值进行筛选(其值在整个树范围内唯一)string-
scopedSlots使用 treeData 时,可以通过该属性配置支持 slot 的属性,如 scopedSlots: { title: ‘XXX’}object-