当前位置: 首页 > news >正文

element-ui 2的级联选择器,懒加载模式下,回显已存储的子选项名称

文章目录

  • 初始化级联选择控件
  • 回显已存储的子选项

https://element.eleme.io/#/en-US/component/cascader

初始化级联选择控件

options提供用于初始化的一级选项

<el-cascaderref="cascader1":options="firstLevelOptions"collapse-tags:props="lazyLoadSettings"v-model="checkedAry">

props里配置懒加载具体实现

data() {return {firstLevelOptions: [],lazyLoadSettings: {lazy: true,multiple: true,lazyLoad(node, resolve) {// 加载第二级的选项列表,children初始化过,则不需再重新获取数据if (node.level === 1 && !!node.children) {const query = node.data.value;queryNextLevelOptions(query).then(resp => {const options = resp.data.map(item => ({value: item.optionId,label: item.optionName,leaf: true}));resolve(options);});} else {resolve([]);}}}}
}

回显已存储的子选项

因为是懒加载,所以二级选项都不存在,默认无法回显已选择的子选项名称;
需要在控件的一级选项(options)里主动注入savedValues所涉及的二级选项列表

async getFirstLevelOptions() {const resp = await request.get("aaa/bbb/ccc");const options = resp.data.map(item => ({value: item.optionId;label: item.optionName;}));return options;
}async initCascaderValue(savedValues) {if (this.firstLevelOptions.length === 0) {this.firstLevelOptions = await this.getFirstLevelOptions();}savedValues.forEach(selectedValue => {this.firstLevelOptions.forEach(firstLevel => {// 单个selectedValue的格式是['level1Value', 'level2Value']if (firstLevel.value === selectedValue[0] && !firstLevel.children) {// 按需加载二级选项的列表,让children数组内的子项触发控件展示数据的更新this.$set(firstLevel, "children", []);queryNextLevelOptions(firstLevel.value).then(resp => {resp.data && resp.data.forEach(item => {const option = {}option.value = item.optionId;option.label = item.optionName;option.leaf = true;firstLevel.children.push(option);});});}});});// 设置已选的value,控件会自动显示对应的名称this.checkedAry = savedValues;
}

http://www.mrgr.cn/news/82832.html

相关文章:

  • 关于Mac中的shell
  • 如何从串 ‘ 中国 +86‘ 中,获取到‘中国’:strip()、split()及正则表达式的使用
  • CentOS: RPM安装、YUM安装、编译安装(详细解释+实例分析!!!)
  • voice agent实现方案调研
  • C++ Latch 和 Barrier: 新手指南
  • 03、MySQL安全管理和特性解析(DBA运维专用)
  • js复制数据到剪切板
  • CODESYS MODBUS TCP通信(AM400PLC作为主站通信)
  • Linux 知识(2)
  • 《Vue3 七》插槽 Slot
  • 神经网络第一课
  • c++ thread线程join、detach、joinable方法
  • Java(1)入门基础
  • 数据结构-栈与队列笔记
  • 快速入门Spring Cloud Alibaba,轻松玩转微服务
  • 设计模式与游戏完美开发(3)
  • QT实现 端口扫描暂停和继续功能 3
  • 30、论文阅读:基于小波的傅里叶信息交互与频率扩散调整的水下图像恢复
  • 【HarmonyOS】鸿蒙应用点9图的处理(draw9patch)
  • Github提交Pull Request教程 Git基础扫盲(零基础易懂)
  • imageio 图片转mp4 保存mp4
  • 【FTP 协议】FTP主动模式
  • 【TextIn—智能文档解析与DocFlow票据AI自动化处理:赋能企业文档数字化管理与数据治理的双重利器】
  • 【学Rust开发CAD】1 环境搭建
  • WebRtc02: WebRtc架构、目录结构、运行机制
  • unity3d-搞个场景漫游如何实现Alpha