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

最新推荐文章于 2025-06-19 11:50:48 发布

原创最新推荐文章于 2025-06-19 11:50:48 发布 · 480 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

前端总结专栏收录该内容

83 篇文章

订阅专栏

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

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

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

这里先定义下拉按钮：

      <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里面要先定义方法来查所有冰淇淋口味：

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

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

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

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

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

import接口

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

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

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