最近使用antdv的a-tree-select實現(xiàn)一個功能：選中子節(jié)點需要拼接父節(jié)點
如圖所示
問題就是 沒有直接的api可以支持
記錄一下解決方法
原本的使用
// html
<a-tree-select v-model:value="value" :tree-data="treedata" />
// js
const value = ref()
const treedata = reef([{
title: '1',
value: '1',
children: [
{
title: '2',
value: '2',
},
{
title: '3',
value: '3',
},
],
}])
修改后文章來源：http://www.zghlxwxcb.cn/news/detail-637528.html
// html
<a-tree-select
labelInValue // 使用該屬性 將值變成對象 包含 title value
:value="treeValue" // 不雙向綁定
:tree-data="treedata"
@select="selectTree" // 選擇這里進行賦值操作
/>
//js
...
const treeValue = ref()
const selectTree = (val) => {
value.value = val;
treeValue.value = {
value: val,
label: getSelectedItem(val, treedata.value);,
};
};
// 因為我是只有兩層 所以只需要遍歷兩層就好了 多層的話嵌套遍歷一下
const getSelectedItem = (value, data) => {
let str = '';
data.some((d) => {
return d.children?.some((c) => {
if (c.value === value) {
str = d.title + '/' + c.title;
return true;
}
});
});
return str;
};
總結
就是利用labelInValue 屬性 處理顯示的title文章來源地址http://www.zghlxwxcb.cn/news/detail-637528.html
到了這里，關于antdvue tree-select樹選擇組件 選中值顯示label拼接父節(jié)點的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
