Element级联选择器自定义value label

最新推荐文章于 2025-07-21 17:26:35 发布

原创最新推荐文章于 2025-07-21 17:26:35 发布 · 2.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

vue 同时被 2 个专栏收录

25 篇文章

订阅专栏

element组件

8 篇文章

订阅专栏

本文介绍级联选择器的使用方法及如何通过props指定选项的值来适配不同项目需求。当后端返回的数据格式与组件默认要求不符时，可通过这种方式确保数据正确渲染。

级联选择器是很好用的组件，在项目中经常会用到。

它有特定的数据格式：(value,label,childern)

options: [
    {
        value: 'zhinan',
        label: '指南',
        children: [
            {
                value: 'shejiyuanze',
                label: '设计原则',
                children: [
                    {
                      value: 'yizhi',
                      label: '一致'
                    }, 
                    {
                      value: 'fankui',
                      label: '反馈'
                    },
                    {
                      value: 'xiaolv',
                      label: '效率'
                    },
                    {
                      value: 'kekong',
                      label: '可控'
                    }]
             },
             {
                value: 'daohang',
                label: '导航',
                children: [
                    {
                      value: 'cexiangdaohang',
                      label: '侧向导航'
                    }, 
                    {
                      value: 'dingbudaohang',
                      label: '顶部导航'
                    }
                ]
             }
         ]
      }
]

实际项目中后端返回的数据属性可能不是以`label/value`等命名的，这时候数据就渲染不上去。我们需要利用`props`指定选项的值为选项对象的某个属性值。