参数是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
      }
    }
相关推荐
全宝6 分钟前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele30 分钟前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮36 分钟前
【无标题】
开发语言·前端·javascript
fie888941 分钟前
浅谈几种js设计模式
开发语言·javascript·设计模式
谦行1 小时前
深度神经网络训练过程与常见概念
前端
Simon_He1 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊2 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录2 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
徊忆羽菲2 小时前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃2 小时前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端