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