[JavaScript知识库]Vue Treeselect使用常见问题汇总及解决办法（持续更新）

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>

** 本人使用程度较浅，以上是总结使用中遇到的问题，如有错误恳请批评纠正，先谢为敬！ **