若依项目通用套路——列表页面提前加载数据塞进下拉框待选项

北极糊的狐2025-04-02 13:30

例如现在有一个冰淇淋口味列表要做查询展示：

需要作为口味来筛选，肯定是在这个页面加载的时候就把所有口味查出来塞进下拉框供下拉

所以前端代码的create里面要先定义方法来查：

这里先定义下拉按钮：

javascript 复制代码

      <el-form-item label="冰淇淋口味" prop="iceId">
        <el-select v-model="queryParams.iceId" placeholder="请选择冰淇淋口味" filterable clearable size="small">
          <el-option v-for="item in iceOptions" v-if="item.parentId != '0'" :key="item.id"
                     :label="item.iceName" :value="item.id" />
        </el-select>
      </el-form-item>

然后到create里面要先定义方法来查所有冰淇淋口味：

javascript 复制代码

  created() {
    this.getIceList();
    。。。
  },

定义一个数组来接收冰淇淋口味选项Options作下拉

javascript 复制代码

      // 冰淇淋口味选项
      iceOptions: [],

在方法里面调接口获取所有口味后塞进去

javascript 复制代码

    //获取冰淇淋口味
    getIceList() {
      getIceListOrg().then(response => {
        this.iceOptions = response.data;
      });
    },

import接口

javascript 复制代码

import {getIceListOrg} from "@/api/ice/iceOrg";

最后把下拉框选中的项id定义到查询参数queryParams里面去赋值带给查询接口即可

javascript 复制代码

      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        iceId: null,
      },