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>
           

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>
           

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