[转]Vue Treeselect使用常见问题汇总及解决办法

文章中使用的数据样例（数据字段和值，仅便于突出展示效果，并非实际使用需要）如下：

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