参数是Id,但要显示接口中的id对应的名称

当下拉数据是个接口,且后台表单和列表中给的参数是Id,但要显示接口中的id对应的名称

先在data中定义要显示的名称 productName

1.form下拉

cpp 复制代码
 <el-form-item label="产品名称" prop="productId">
        <el-select v-model="queryParams.productId" clearable placeholder="请输入产品名称"  style="width: 100%" >
          <el-option
            v-for="item in productNameList"
            :key="item.id"
            :label="item.productName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>

2.列表中

cpp 复制代码
  <el-table-column label="产品名称" align="center" prop="productId" >
        <template slot-scope="scope">
          <span v-show="isDisable=true">{{getProductName(scope.row.productId)}}</span>
          <span>{{productName}}</span>
        </template>
      </el-table-column>

3.转化方法

cpp 复制代码
 getProductName(val){
     for (let i=0;i<this.productNameList.length;i++){
        val !=null || val !== void 0? this.productName = this.productNameList.find(item => item.id === val).productName : this.productName == null
      }
    }
相关推荐
sdgsdgdsgc15 分钟前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生98415 分钟前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
心止水j17 分钟前
spark
javascript·数据库·spark
黑云压城After3 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务5 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友5 小时前
什么是断言?
前端·后端·安全
FIN66686 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4956 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1246 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树6 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端