• Eluments ui 二级下拉菜单 回显问题


    有这样的数据:

    data(){
            return {
                saveBtnDisabled:false,
                courseInfo: {
                  title: '',
                  subjectId: '', //二级分类id
                  subjectParentId: '',//一级分类id
                  teacherId: '',
                  lessonNum: 0,
                  description: '',
                  cover: '/static/01.jpg',
                  price: 0
                },
                BASE_API: process.env.BASE_API,//接口API地址
                subjectOneList: [], //一级分类数据
                subjectTwoList: [], //二级分类数据
            }
        },

    结构(请先看下面的结构):

     

          <el-form-item label="一级分类">
          <el-select
            v-model="courseInfo.subjectParentId"
            placeholder="请选择" @change="getTwoSubject">
            <el-option
              v-for="subject in subjectOneList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"
              />
          </el-select>
    
        
          <!-- 二级分类 -->
          <el-select v-model="courseInfo.subjectId" placeholder="请选择">
            <el-option
              v-for="subject in subjectTwoList"
              :key="subject.value"
              :label="subject.title"
              :value="subject.id"
              
              />
          </el-select>
        </el-form-item>

    分析:

     通过遍历下面

        subjectOneList: [], //一级分类数据
    来显示一级的下拉菜单的可选内容,当一级菜单选中一个时,即发生
        @change="getTwoSubject" 
    事件时,会调用 getTwoSubject 方法来处理数据,得到二级分类数组,然后赋值给
        subjectTwoList: [], //二级分类数据
    来遍历显示。
    用户选择信息后,会通过双向绑定数据到 courseInfo 对象中。直到提交都是没有问题的,但当我们进行数据的回显时,即我们通过接口获取到之前的 courseInfo 赋值到现在的 courseInfo
    时,二级分类会出现只显示二级分类的id ,原因时,我们没有触发一级分类下拉菜单的change事件,所以二级分类无法显示对象的内容。所以我们需要让二级分类有一级分类对象的内容,这样框架才能
    帮我们进行回显。
    解决方法:
    for(var i=0;i<this.subjectOneList.length;i++) {
           //获取每个一级分类
           var oneSubject = this.subjectOneList[i];
           if(this.courseInfo.subjectParentId == oneSubject.id) {
                this.subjectTwoList = oneSubject.children //关键点
           }
    }
  • 相关阅读:
    Redis使用
    Linux下安装Tomcat
    Linux安装MySQL
    jquery的clone方法bug的修复select,textarea的值丢失
    sql 跨服务器查询数据
    无法执行该操作,因为链接服务器 "xxxxx" 的 OLE DB 访问接口 "SQLNCLI" 无法启动分布式事务
    web服务器决定支持多少人同时在线的因素
    2016最新的中国省市区三级数据库表.sql mssql
    sqlserver2008R2数据库自动备份脚本
    sql server 2008 windows验证改混合登陆中SqlServer身份验证用户名密码
  • 原文地址:https://www.cnblogs.com/zjazn/p/14441243.html
Copyright © 2020-2023  润新知