Vue Treeselect使用常见问题汇总及解决办法（持续更新）

最新推荐文章于 2024-08-09 07:26:23 发布

geXingW

最新推荐文章于 2024-08-09 07:26:23 发布

阅读量1w

点赞数 9

分类专栏： Vue 文章标签： node.js vue javascript

本文链接：https://blog.csdn.net/for_happy123/article/details/119962493

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文总结了VueTreeselect组件在使用过程中遇到的几个关键问题及其解决办法，包括自定义展示字段、处理空子选项、禁止非叶子节点选择及节点选中时的回调方法。通过自定义normalizer函数，可以灵活地定义数据字段，同时针对空子选项的处理避免了不必要的显示。此外，设置disable-branch-nodes属性可限制仅叶子节点可选，而@select事件监听器则用于在节点选中时执行自定义操作。

摘要由CSDN通过智能技术生成

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>