zoukankan      html  css  js  c++  java
  • 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 //关键点
           }
    }
  • 相关阅读:
    基于 VirtualApp 结合 whale hook框架实现hook第三方应用
    C/C++标准有哪些?
    【tips】编译epic异常解决
    Android 虚拟多开系列二——技术原理
    Android 虚拟多开系列一——技术调研
    Ubuntu 16.04 Apache2 更改访问html根路径方案(可解决403)
    android 原生 MediaPlayer 和 MediaCodec 的区别和联系(三)
    Android 原生 MediaPlayer 和 MediaCodec 的区别和联系(二)
    Android MediaPlayer 和 MediaCodec 的区别和联系(一)
    Mongodb实战使用指南
  • 原文地址:https://www.cnblogs.com/zjazn/p/14441243.html
Copyright © 2011-2022 走看看