AntDesignVue中TreeSelect详解<template>
<a-tree-select
v-model:value="value"
:tree-data="treeData"
allow-clear
@select="selectHnader"
search-placeholder="Please select"
/>
</template>
<script lang="ts">
import { TreeSelect } from 'ant-design-vue';
import { defineComponent, ref, toRefs, watch } from 'vue';
const treeData = [
{
title: '部门0-0',
value: '0-0',
key: '0-0',
children: [
{
title: '部门0-0-0',
value: '0-0-0',
key: '0-0-0',
},
],
},
{
title: '部门0-1',
value: '0-1',
key: '0-1',
children: [
{
title: '部门0-1-0',
value: '0-1-0',
key: '0-1-0',
disabled: true, // 该值不能够选中
},
{
title: '教育局',
value: '0-1-1',
key: '0-1-1',
},
],
},
]
export default defineComponent({
setup() {
//  那么它将选中部门部门0-0-0；
// 通过value值显⽰对应的title值
const value = ref(['0-0-0']);
// 监听，但是可能不需要
antdesignvue 配置外部文件
watch(value, () => {
console.log(value.value);
});
function selectHnader(value:any, node:any, extray:any){
console.log("==>value",value); //获取的是数据源中的value值
console.log("==>node", toRefs(node) ); // 该选中节点的属性
console.log("==>extray",extray.selectedNodes[0].props.title); //得到显⽰的值
}
return {
value,
treeData,
selectHnader
};
},
});
</script>
使⽤select事件
select 事件被选中时调⽤
function(value, node, extra)
我使⽤ select事件主要是得到选中的显⽰值
最初我还想通过递归根据id得到显⽰的值{哈哈。尴尬了}