文章中使用的數據樣例（數據字段和值，僅便於突出展示效果，並非實際使用需要）如下：
const mockData = [
"id": 1,
"name": "手機",
"subOptions": [
{
"value": 21,
"name": "5G手機",
"subOptions": []
}
],
]
1.自定義展示字段：
<tempalte>
<treeselect :options="options" :normalizer="normalizer" />
</tempalte>
<script>
export default {
data (){
return {
options: mockData,
normalizer() { // 自定義數據字段
id: node.key, // 自定義選中值
label: node.name, // 自定義標簽顯示
children: node.subOptions, // 自定義下級chidlren字段
}
}
}
}
</script>
2.chidlren為空（包含[]和null）時，不展示下拉角標和No options available.提示：
1. API調整：chidlren沒有值時，將children字段移除;
2. 前段自行處理，代碼如下：
<tempalte>
<treeselect :normalizer="normalizer" :options="options"/>
</tempalte>
<script>
export default {
data (){
return {
options: mockData,
normalizer() { // 自定義數據字段
id: node.key, // 自定義選中值
label: node.name, // 自定義標簽顯示
children: node.subOptions && node.subOptions.length > 0 ? node.subOptions: 0, // 自定義下級chidlren字段
}
}
}
}
</script>
3. 從api取得數據后，遞歸遍歷移除children，實在太麻煩懶得寫
3.設置僅葉子節點可被選中：
<tempalte>
<treeselect :options="options" :disable-branch-nodes="true" />
</tempalte>
<script>
export default {
data (){
return {
options: mockData
}
}
}
</script>
4.節點選中時觸發自定義方法：
<tempalte>
<treeselect :normalizer="normalizer"
:options="options"
:disable-branch-nodes="true"
@select="handleSelect" />
</tempalte>
<script>
export default {
data (){
return {
options: mockData
}
},
methods: {
handleSelect(node) {
// TODO 需要做的事情
}
}
}
</script>
** 本人使用程度較淺，以上是總結使用中遇到的問題，如有錯誤懇請批評糾正，先謝為敬！ **
————————————————
版權聲明：本文為CSDN博主「geXingW」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/for_happy123/article/details/119962493