当前位置: 首页 > article >正文

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

当下拉数据是个接口,且后台表单和列表中给的参数是Id,但要显示接口中的id对应的名称
先在data中定义要显示的名称 productName
1.form下拉

 <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.列表中

  <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.转化方法

 getProductName(val){
      for (let i=0;i<this.productNameList.length;i++){
        this.productName = this.productNameList.find(item => item.id == val).productName
      }
    }

http://www.kler.cn/a/160296.html

相关文章:

  • Linux源码阅读笔记-V4L2框架基础介绍
  • 性能测试|JMeter接口与性能测试项目
  • css:盒子模型
  • 微服务(二)
  • ssm100医学生在线学习交流平台+vue(论文+源码)_kaic
  • Sigrity SPEED2000 Power Ground Noise Simulation模式如何查看PDS系统的自阻抗操作指导
  • Linux常用指令详解
  • TCP实现一对一聊天
  • 介绍 Apache Spark 的基本概念和在大数据分析中的应用。
  • 大数据-之LibrA数据库系统告警处理(ALM-37014 Gaussdb进程锁文件已经存在)
  • Web前端JS如何获取 Video/Audio 视音频声道(左右声道|多声道)、视音频轨道、音频流数据
  • 力扣每日一题:2646. 最小化旅行的价格总和(2023-12-06)
  • HarmonyOS4.0从零开始的开发教程05 应用程序入口—UIAbility的使用
  • C++EasyX之井字棋
  • 【华为数据之道学习笔记】3-1 基于数据特性的分类管理框架
  • 大数据可视化项目——基于Python豆瓣电影数据可视化分析系统的设计与实现
  • AIGC: 关于ChatGPT中基于Whisper模型实现音频转文本
  • Java利用UDP实现简单群聊
  • 做题笔记:SQL Sever 方式做牛客SQL的题目--VQ35
  • Java开源工具库Guava使用指南详解
  • sqlite3.44.2的编译
  • centos7安装rabbitMQ
  • Jenkins UI 自动化持续化集成测试
  • linux缓冲区(buff/cache)内存占用过高解决办法
  • 从零开发短视频电商 Jmeter压测示例模板详解(无认证场景)
  • 2023年山东省职业院校技能大赛信息安全管理与评估第一阶段样题