当前位置: 首页 > 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/news/160296.html

相关文章:

  • 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年山东省职业院校技能大赛信息安全管理与评估第一阶段样题
  • ffmpeg与opencv-python处理视频
  • 聚观早报 |东方甄选将上架文旅产品;IBM首台模块化量子计算机
  • 准确!!!在 CentOS 8 上配置 PostgreSQL 14 的主从复制
  • 2024年江苏省职业院校技能大赛信息安全管理与评估 第三阶段学生组(样卷)
  • Qt进程和线程
  • B 站基于 StarRocks 构建大数据元仓
  • 后端返回数据前端保留两位小数
  • 8-tornado中模板的使用(通过字符串返回、通过模板Template返回、通过模板render返回)、模板案例
  • Elasticsearch,Kibana集成,x-pack鉴权配置
  • Pandas 打开有密码的Excel