动态绑定elementUI级联选择器的值和显示内容

2023-12-13 03:43| 来源: 网络整理| 查看: 265

前端中大部分的数据都是由访问后台接口获取到。所以我们需要将获取到的数据再绑定到对应的组件中。其中接口对应的字段和组件中要绑定的字段不一样完全一致，所以我们要设置相应的属性，实现联动，一一对应。

后台返回的数据格式如下

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

查看官方文档可知，显示文本对应的是props 中的label属性。因此在data中新增属性设置label ，并在template中对应的级联选择器绑定属性。

data(){ return{ props:{ multiple: true, // 多选 label: 'name' // 将对象中的name绑定到组件的label属性上 }, cascaderVal:[], } } {{data.label}} ({{data.children.length}})

关键点在于:要设置props属性，参考elementui官方文档，还可以手动绑定value和children属性，当返回接口和组件属性值不一致时。官方地址：https://element.eleme.io/#/zh-CN/component/cascader 在这里插入图片描述

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章