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

~张小八~2023-12-09 0:30

当下拉数据是个接口，且后台表单和列表中给的参数是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
      }
    }