树型选择控件

何时使用

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

代码演示

TreeSelect 树选择 - 图1

基本用法

最简单的用法。

  1. <template>
  2.   <a-tree-select
  3.     showSearch
  4.     style="width: 300px"
  5.     :value="value"
  6.     :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
  7.     placeholder="Please select"
  8.     allowClear
  9.     treeDefaultExpandAll
  10.     @change="onChange"
  11.   >
  12.     <a-tree-select-node value="parent 1" title="parent 1" key="0-1">
  13.       <a-tree-select-node value="parent 1-0" title="parent 1-0" key="0-1-1">
  14.         <a-tree-select-node :selectable="false" value="leaf1" title="my leaf" key="random" />
  15.         <a-tree-select-node value="leaf2" title="your leaf" key="random1" />
  16.       </a-tree-select-node>
  17.       <a-tree-select-node value="parent 1-1" title="parent 1-1" key="random2">
  18.         <a-tree-select-node value="sss" key="random3">
  19.           <b style="color: #08c" slot="title">sss</b>
  20.         </a-tree-select-node>
  21.       </a-tree-select-node>
  22.     </a-tree-select-node>
  23.   </a-tree-select>
  24. </template>
  26. <script>
  27.   export default {
  28.     data() {
  29.       return {
  30.         treeExpandedKeys: [],
  31.         value: undefined,
  32.       };
  33.     },
  34.     methods: {
  35.       onChange(value) {
  36.         console.log(value);
  37.         this.value = value;
  38.       },
  39.     },
  40.   };
  41. </script>

TreeSelect 树选择 - 图2

可勾选

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

  1. <template>
  2.   <a-tree-select
  3.     style="width: 300px"
  4.     :treeData="treeData"
  5.     :value="value"
  6.     @change="onChange"
  7.     treeCheckable
  8.     :showCheckedStrategy="SHOW_PARENT"
  9.     searchPlaceholder="Please select"
  10.   />
  11. </template>
  13. <script>
  14.   import { TreeSelect } from 'ant-design-vue';
  15.   const SHOW_PARENT = TreeSelect.SHOW_PARENT;
  17.   const treeData = [
  18.     {
  19.       title: 'Node1',
  20.       value: '0-0',
  21.       key: '0-0',
  22.       children: [
  23.         {
  24.           title: 'Child Node1',
  25.           value: '0-0-0',
  26.           key: '0-0-0',
  27.         },
  28.       ],
  29.     },
  30.     {
  31.       title: 'Node2',
  32.       value: '0-1',
  33.       key: '0-1',
  34.       children: [
  35.         {
  36.           title: 'Child Node3',
  37.           value: '0-1-0',
  38.           key: '0-1-0',
  39.           disabled: true,
  40.         },
  41.         {
  42.           title: 'Child Node4',
  43.           value: '0-1-1',
  44.           key: '0-1-1',
  45.         },
  46.         {
  47.           title: 'Child Node5',
  48.           value: '0-1-2',
  49.           key: '0-1-2',
  50.         },
  51.       ],
  52.     },
  53.   ];
  54.   export default {
  55.     data() {
  56.       return {
  57.         value: ['0-0-0'],
  58.         treeData,
  59.         SHOW_PARENT,
  60.       };
  61.     },
  62.     methods: {
  63.       onChange(value) {
  64.         console.log('onChange ', value);
  65.         this.value = value;
  66.       },
  67.     },
  68.   };
  69. </script>

TreeSelect 树选择 - 图3

多选

多选的树选择。

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

TreeSelect 树选择 - 图4

从数据直接生成

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

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

TreeSelect 树选择 - 图5

后缀图标

最简单的用法。

  1. <template>
  2.   <a-tree-select
  3.     showSearch
  4.     style="width: 300px"
  5.     :value="value"
  6.     :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
  7.     placeholder="Please select"
  8.     allowClear
  9.     treeDefaultExpandAll
  10.     @change="onChange"
  11.   >
  12.     <a-icon slot="suffixIcon" type="smile" />
  13.     <a-tree-select-node value="parent 1" title="parent 1" key="0-1">
  14.       <a-tree-select-node value="parent 1-0" title="parent 1-0" key="0-1-1">
  15.         <a-tree-select-node value="leaf1" title="my leaf" key="random" />
  16.         <a-tree-select-node value="leaf2" title="your leaf" key="random1" />
  17.       </a-tree-select-node>
  18.       <a-tree-select-node value="parent 1-1" title="parent 1-1" key="random2">
  19.         <a-tree-select-node value="sss" key="random3">
  20.           <b style="color: #08c" slot="title">sss</b>
  21.         </a-tree-select-node>
  22.       </a-tree-select-node>
  23.     </a-tree-select-node>
  24.   </a-tree-select>
  25. </template>
  27. <script>
  28.   export default {
  29.     data() {
  30.       return {
  31.         value: undefined,
  32.       };
  33.     },
  34.     methods: {
  35.       onChange(value) {
  36.         console.log(value);
  37.         this.value = value;
  38.       },
  39.     },
  40.   };
  41. </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
disableCheckbox禁掉 checkboxbooleanfalse
disabled是否禁用booleanfalse
isLeaf是否是叶子节点booleanfalse
key此项必须设置（其值在整个树范围内唯一）string | number-
title树节点显示的内容string|slot'—-'
value默认根据此属性值进行筛选（其值在整个树范围内唯一）string-
scopedSlots使用 treeData 时，可以通过该属性配置支持 slot 的属性，如 scopedSlots: { title: 'XXX'}object-