• 树型选择控件
    • 何时使用
    • 代码演示
      • 基本用法
      • 可勾选
      • 多选
      • 从数据直接生成
      • 后缀图标
  • API
    • Tree props
    • 事件
    • Tree 方法
    • TreeNode props

    树型选择控件

    何时使用

    类似 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-