参数是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
      }
    }
相关推荐
Rhys..4 分钟前
JS - npm init
开发语言·javascript·npm
夏天想7 分钟前
复制了一个vue的项目然后再这个基础上修改。可是通过npm run dev运行之前的老项目,发现运行的竟然是拷贝后的项目。为什么会这样?
前端·vue.js·npm
@大迁世界14 分钟前
这个 CSS 特性,可能终结样式冲突
前端·css
zzzsde27 分钟前
【C++】深入理解string类(5)
java·前端·算法
袁煦丞30 分钟前
随机菜谱解救选择困难!YunYouJun/cook 成为你的厨房锦囊:cpolar内网穿透实验室第549个成功挑战
前端·程序员·远程工作
携欢38 分钟前
PortSwigger靶场之CSRF where token is tied to non-session cookie通关秘籍
运维·服务器·前端
yiludegeX1 小时前
fluth-vue: 体验流式编程范式之美
vue.js·前端框架·rxjs
我是华为OD~HR~栗栗呀1 小时前
华为OD-21届考研-Java面经
java·前端·c++·python·华为od·华为·面试
詩句☾⋆᭄南笙1 小时前
CSS美化网页元素
前端·css·html
程序0071 小时前
HTML+JS+CSS实现汽车官网
javascript·css·html