获取element ui cascader中label标签

主代码

 const treeToLabel = (data, arr) => {
            let result =[]
            const childrenTreeToLabel = (data, arr, result) => {
              for(let j = 0; j < data.length; j++) {
                if (arr[0] == data[j].value) {
                  result.push(data[j].label)
                  if (data[j].children && arr.length > 1) {
                    return childrenTreeToLabel(data[j].children, arr.slice(1), result)
                  }
                  break;
                }
              }
            }
            childrenTreeToLabel(data,arr,result)
            this.form.province = result[0]
            this.form.city = result[1]
            return result
          }

          console.log(treeToLabel(this.city, this.place_value),99999);

data为原始列表
attr为获取到的value列表
添加@change,当选取值改变时,调用函数
在这里插入图片描述
参考:
https://www.codeleading.com/article/40132360914/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 Element UICascader 组件来实现动态加载。Cascader 组件支持通过 `lazy` 属性来实现动态加载数据。当用户点击父级选项时,你可以通过监听 `load` 事件来触发加载子级选项的数据。 首先,你需要在父级选项的 `load` 事件调用异步函数加载子级选项的数据。在加载完成后,将数据赋值给子级选项,并将 `loading` 属性设置为 `false`。 以下是一个简单的示例代码: ```html <template> <el-cascader :options="options" :load-data="loadData" @load="handleLoad" ></el-cascader> </template> <script> export default { data() { return { options: [] // 父级选项数据 }; }, methods: { loadData(selectedOptions) { const targetOption = selectedOptions[selectedOptions.length - 1]; // 模拟异步加载数据 setTimeout(() => { targetOption.loading = false; targetOption.children = [ { label: '子级选项1', value: '1' }, { label: '子级选项2', value: '2' }, { label: '子级选项3', value: '3' } ]; }, 1000); }, handleLoad(selectedOptions) { const targetOption = selectedOptions[selectedOptions.length - 1]; targetOption.loading = true; } } }; </script> ``` 在这个示例,当用户点击父级选项时,会触发 `load` 事件,在 `handleLoad` 方法设置 `loading` 属性为 `true`,然后在 `loadData` 方法加载子级选项的数据,并将加载完成后的数据赋值给子级选项。 你可以根据自己的需求修改加载数据的方式和逻辑。 希望能够帮到你!如有任何问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值