• element-ui 联级选择器组件 编辑回显数据


    1. 大部分情况下,新增完表单后,存放在数据库里的值一般都只是一个 数字id, 如果想要组件回显, 就重组联级组件需要的数组变量

    例: 现在element-ui 支持联级又多选的方式,最终v-model绑定的值的结构就是一个 二位数组

    //使用方法
    this.completeCharge(
            {
              valueList: this.formValue, //数据库存放的值,(数组)
              data: this.options,           //联级绑定的options(树形结构)
              valueName: "id",            //设置你的树形结构想要获取到的key
              childrenName: "children",//设置你的树形结构的子数组key
              callback(value) {   //回调 可能多次触发
                t.category.push(value);  //value就是一个数组,对应一个联级选中的值
              }
            }
          );    
    completeCharge(data, array = []) {
          let arr = [...array]
          for (let item of data.data) {
            arr.push(item[data.valueName]);
            if (item[data.childrenName] && item[data.childrenName].length > 0) {
              this.completeCharge(
                {
                  valueList: data.valueList,
                  valueName: data.valueName,
                  childrenName: data.childrenName,
                  data: item[data.childrenName],
                  callback: data.callback
                },
                [...arr]
              );
            } else {
              if (data.valueList.includes(item[data.valueName])) {
                data.callback([...arr])
              }
            }
            arr.pop()
          }
        }
  • 相关阅读:
    java 编程基础 Class对象 反射:代理模式和静态代理
    sql优化(排序)
    Mysql备份恢复
    Mysql5.7.33安装
    Networker oracle备份恢复
    Centos7 安装11.2.0.4
    spring security 自定义多种方式登录授权
    CentOS 7 安装Nginx 并配置自动启动
    Nginx 配置模板
    Alibaba cloud 版本说明
  • 原文地址:https://www.cnblogs.com/gosh-hash/p/11165605.html
Copyright © 2020-2023  润新知