TreeSelect 树选择

树型选择控件。

何时使用

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

代码演示

最简单的用法。

                        <template>
  <a-tree-select
    v-model:value="value"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
  >
    <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
      <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
        <a-tree-select-node key="random" value="leaf1" title="my leaf" />
        <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
      </a-tree-select-node>
      <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
        <a-tree-select-node key="random3" value="sss">
          <template #title><b style="color: #08c">sss</b></template>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue';
export default defineComponent({
  setup() {
    const value = ref<string>();
    watch(value, () => {
      console.log(value.value);
    });
    return {
      value,
    };
  },
});
</script>

                    

从数据直接生成

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

                        <template>
  <a-tree-select
    v-model:value="value"
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    placeholder="Please select"
    tree-default-expand-all
  >
    <template #title="{ key, value }">
      <span style="color: #08c" v-if="key === '0-0-1'">Child Node1 {{ value }}</span>
    </template>
  </a-tree-select>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'; 
interface TreeDataItem {
  value: string;
  key: string;
  title?: string;
  slots?: Record<string, string>;
  children?: TreeDataItem[];
} 
const treeData: TreeDataItem[] = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        value: '0-0-1',
        key: '0-0-1',
        slots: {
          title: 'title',
        },
      },
      {
        title: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
  },
];
export default defineComponent({
  setup() {
    const value = ref<string>(); 
    watch(value, () => {
      console.log(value.value);
    });
    return {
      value,
      treeData,
    };
  },
});
</script>

                    

后缀图标

最简单的用法。

                        <template>
  <a-tree-select
    v-model:value="value"
    show-search
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    tree-default-expand-all
  >
    <template #suffixIcon><SmileOutlined /></template>
    <a-tree-select-node value="parent 1" title="parent 1" key="0-1">
      <a-tree-select-node value="parent 1-0" title="parent 1-0" key="0-1-1">
        <a-tree-select-node value="leaf1" title="my leaf" key="random" />
        <a-tree-select-node value="leaf2" title="your leaf" key="random1" />
      </a-tree-select-node>
      <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
        <a-tree-select-node key="random3" value="sss">
          <template #title><b style="color: #08c">sss</b></template>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>
<script lang="ts">
import { SmileOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {
    SmileOutlined,
  },
  setup() {
    const value = ref<string>(); 
    return {
      value,
    };
  },
});
</script>

                    

多选

多选的树选择。

                        <template>
  <a-tree-select
    show-search
    style="width: 100%"
    v-model:value="value"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    placeholder="Please select"
    allow-clear
    multiple
    tree-default-expand-all
  >
    <a-tree-select-node key="0-1" value="parent 1" title="parent 1">
      <a-tree-select-node key="0-1-1" value="parent 1-0" title="parent 1-0">
        <a-tree-select-node key="random" value="leaf1" title="my leaf" />
        <a-tree-select-node key="random1" value="leaf2" title="your leaf" />
      </a-tree-select-node>
      <a-tree-select-node key="random2" value="parent 1-1" title="parent 1-1">
        <a-tree-select-node key="random3" value="sss">
          <template #title><b style="color: #08c">sss</b></template>
        </a-tree-select-node>
      </a-tree-select-node>
    </a-tree-select-node>
  </a-tree-select>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'; 
export default defineComponent({
  setup() {
    const value = ref<string[]>([]); 
    watch(value, () => {
      console.log('select', value.value);
    }); 
    return {
      value,
    };
  },
});
</script>

                    

可勾选

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

                        <template>
  <a-tree-select
    v-model:value="value"
    style="width: 100%"
    :tree-data="treeData"
    tree-checkable
    allow-clear
    :show-checked-strategy="SHOW_PARENT"
    search-placeholder="Please select"
  />
</template>
<script lang="ts">
import { TreeSelect } from 'ant-design-vue';
import { defineComponent, ref, watch } from 'vue';
const SHOW_PARENT = TreeSelect.SHOW_PARENT; 
interface TreeDataItem {
  value: string;
  key: string;
  title?: string;
  disabled?: boolean;
  children?: TreeDataItem[];
} 
const treeData: TreeDataItem[] = [
  {
    title: 'Node1',
    value: '0-0',
    key: '0-0',
    children: [
      {
        title: 'Child Node1',
        value: '0-0-0',
        key: '0-0-0',
      },
    ],
  },
  {
    title: 'Node2',
    value: '0-1',
    key: '0-1',
    children: [
      {
        title: 'Child Node3',
        value: '0-1-0',
        key: '0-1-0',
        disabled: true,
      },
      {
        title: 'Child Node4',
        value: '0-1-1',
        key: '0-1-1',
      },
      {
        title: 'Child Node5',
        value: '0-1-2',
        key: '0-1-2',
      },
    ],
  },
];
export default defineComponent({
  setup() {
    const value = ref<string[]>(['0-0-0']); 
    watch(value, () => {
      console.log(value.value);
    }); 
    return {
      value,
      treeData,
      SHOW_PARENT,
    };
  },
});
</script>

                    

异步加载

异步加载树节点。

                        <template>
  <a-tree-select
    v-model:value="value"
    tree-data-simple-mode
    style="width: 100%"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    placeholder="Please select"
    :load-data="onLoadData"
  />
</template>
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'; 
interface TreeDataItem {
  id: string | number;
  pId: number;
  value: string;
  title: string;
  isLeaf?: boolean;
} 
export default defineComponent({
  setup() {
    const value = ref<string>();
    const treeData = ref<TreeDataItem[]>([
      { id: 1, pId: 0, value: '1', title: 'Expand to load' },
      { id: 2, pId: 0, value: '2', title: 'Expand to load' },
      { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
    ]); 
    watch(value, () => {
      console.log(value.value);
    }); 
    const genTreeNode = (parentId: number, isLeaf = false): TreeDataItem => {
      const random = Math.random().toString(36).substring(2, 6);
      return {
        id: random,
        pId: parentId,
        value: random,
        title: isLeaf ? 'Tree Node' : 'Expand to load',
        isLeaf,
      };
    };
    const onLoadData = (treeNode: any) => {
      console.log(treeNode);
      return new Promise((resolve: (value?: unknown) => void) => {
        const { id } = treeNode.dataRef;
        setTimeout(() => {
          treeData.value = treeData.value.concat([genTreeNode(id, false), genTreeNode(id, true)]);
          resolve();
        }, 300);
      });
    };
    return {
      value,
      treeData,
      genTreeNode,
      onLoadData,
    };
  },
});
</script>

                    

API#

Tree props

参数	说明	类型	默认值
allowClear	显示清除按钮	boolean	false
defaultValue	指定默认选中的条目	string/string[]	-
disabled	是否禁用	boolean	false
dropdownClassName	下拉菜单的 className 属性	string	-
dropdownMatchSelectWidth	下拉菜单和选择器同宽	boolean	true
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[] }` 的格式	boolean	false
loadData	异步加载数据	function(node)	-
maxTagCount	最多显示多少个 tag	number	-
maxTagPlaceholder	隐藏 tag 时显示的内容	slot/function(omittedValues)	-
multiple	支持多选（当设置 treeCheckable 时自动变为 true）	boolean	false
placeholder	选择框默认文字	string\|slot	-
searchPlaceholder	搜索框默认文字	string\|slot	-
searchValue(v-model)	搜索框的值，可以通过 `search` 事件获取用户输入	string	-
treeIcon	是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式	boolean	false
showCheckedStrategy	定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点.	enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD }	TreeSelect.SHOW_CHILD
showSearch	在下拉中显示搜索框(仅在单选模式下生效)	boolean	false
size	选择框大小，可选 `large` `small`	string	'default'
suffixIcon	自定义的选择框后缀图标	VNode \| slot	-
treeCheckable	显示 checkbox	boolean	false
treeCheckStrictly	checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true	boolean	false
treeData	treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）	array<{value, label, children, [disabled, disableCheckbox, selectable]}>	[]
replaceFields	替换 treeNode 中 title,value,key,children 字段为 treeData 中对应的字段	object	{children:'children', title:'title', key:'key', value: 'value' }
treeDataSimpleMode	使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id)	false\|Array<{ id: string, pId: string, rootPId: null }>	false
treeDefaultExpandAll	默认展开所有树节点	boolean	false
treeDefaultExpandedKeys	默认展开的树节点	string[] \| number[]	-
treeExpandedKeys(v-model)	设置展开的树节点	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	是否可选	boolean	true
checkable	当树为 checkable 时，设置独立节点是否展示 Checkbox	boolean	-
disableCheckbox	禁掉 checkbox	boolean	false
disabled	是否禁用	boolean	false
isLeaf	是否是叶子节点	boolean	false
key	此项必须设置（其值在整个树范围内唯一）	string \| number	-
title	树节点显示的内容	string\|slot	'---'
value	默认根据此属性值进行筛选（其值在整个树范围内唯一）	string	-
scopedSlots	使用 treeData 时，可以通过该属性配置支持 slot 的属性，如 `scopedSlots: { title: 'XXX'}`	object	-