Vue前端展示列表根据id关联name、下拉框查询实现

将事先代码生成器生成的代码导入到项目中，前端和后端代码

前端展示列表根据id关联name

1、vue加载页面时获取所有的类型数据,(引入js)

import { listSkuClass } from "@/api/manage/skuClass";

2、创建方法在页面一加载的时候执行js中此方法，传入分页数据将返回得到的结果赋值给新创建的集合

​
 // 查询所有数据
      queryAllParams: {
        pageNum: 1,
        pageSize: 10000,
      },
// 商品类型
      skuClass: [],

created() {
    this.getList();
    this.SkuClass(); //加载页面时执行此方法
  },
  methods: {

    SkuClass(){
      listSkuClass(this.queryAllParams).then(response => {
        this.skuClass = response.rows;
        this.loading = false;
      });
    },
}

3、在展示代码处用v-for遍历判断

      <el-table-column label="商品类型" align="center" prop="classId" >
        <template #default="scope">
          <div v-for="item in skuClass" :key="item.classId">
            <span v-if="item.classId == scope.row.classId">
              {{ item.className }}
            </span>  
          </div>
        </template>
      </el-table-column>

下拉框查询实现

1、与前端展示列表根据id关联name一样获取到所有数据之后

2、在代码处遍历

      <el-form-item label="商品类型Id" prop="classId">
        <el-select v-model="queryParams.classId">
          <el-option v-for="item in skuClass" 
          :key="item.classId"
          :label="item.className"
          :value="item.classId"
          />       
        </el-select>
      </el-form-item>