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

最新推荐文章于 2024-07-26 16:59:14 发布

小芬熊

最新推荐文章于 2024-07-26 16:59:14 发布

阅读量7.7k

点赞数 5

分类专栏：前端 html 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_67392010/article/details/123367976

版权

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字段