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

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

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

所以前端代码的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,
      },
相关推荐
某公司摸鱼前端2 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~2 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程2 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
wen's4 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
vvilkim4 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim4 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心5 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络5 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
喜欢敲代码的程序员6 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
失落的多巴胺6 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5