前端回显分类 回显有时显示键值(判断条件:看是否有值传入)

java 复制代码
 <div v-if="form.caseType == 1">
        <p class="title-submit" style="margin-top: 0">案源提供人信息</p>
        <el-row v-for="(item, index) in form.superviseList" :key="index">


          <el-col :span="8">
            <el-form-item :label="`第${index + 1}位监督检查人`" style="margin-left: -40px" required>
              <el-select v-model="item.superviseName" filterable :placeholder="`请选择第${index + 1}位监督检查人`">
                <div v-if="item.isSpDept === 'Y'">
                  <el-option v-for="option in userList" :key="option.userId" :label="option.label" :value="option.userId">
                  </el-option>
                </div>
                <div v-else-if="item.superviseDept">
                  <el-option v-for="option in combinedUserList" :key="option.userId" :label="option.label" :value="option.userId">
                  </el-option>
                </div>
                <div v-else>
                  <el-option v-for="option in otherUserList" :key="option.userId" :label="option.label" :value="option.userId">
                  </el-option>
                </div>
              </el-select>

            </el-form-item>
          </el-col>
复制代码
java 复制代码
   superviseList: [{
          isSpDept: "Y",
          superviseName: "",
          superviseDept: "",
        },],

根据superviseDept是否有传入值 进行回显选择

combinedUserList 是两个回显list的合并值 合并值看之前内容

根据判断 看是否正确回显数据 (此时修改前 表单组件表格 有时候显示字典键值)

java 复制代码
   userList: [],
      otherUserList: [],
      combinedUserList: [],
java 复制代码
  created() {
    listCheckUser(2, true).then((response) => {
      this.userList = response.rows.map((d) => {
        d.label = `${d.nickName}`;
        return d;
      });

      this.combinedUserList = this.userList.concat(this.otherUserList);
    });
相关推荐
懒大王95272 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
斯~内克8 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道8 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
清风絮柳8 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维8 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久8 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain8 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏8 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js
GISer_Jing9 小时前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ9 小时前
React(九)React Hooks
前端·react.js