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

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

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

所以前端代码的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,
      },
相关推荐
zwjapple16 分钟前
React中createPortal 的详细用法
前端·javascript·react.js
小矮马17 分钟前
React-组件通信
前端·javascript·react.js
火星思想1 小时前
你来说说JavaScript作用域
javascript·ecmascript 6
icefiresong241 小时前
如何让 Vue 组件自动清理 EventBus 监听器?告别内存泄漏!
vue.js
纪元A梦2 小时前
华为OD机试真题——通过软盘拷贝文件(2025A卷:200分)Java/python/JavaScript/C++/C语言/GO六种最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
肉肉不吃 肉3 小时前
ES6 模块化 与 CommonJS 的核心概念解析
开发语言·javascript·es6
Eliauk__3 小时前
深入剖析 Vue 双向数据绑定机制 —— 从响应式原理到 v-model 实现全解析
前端·javascript·面试
洋流3 小时前
什么?还没弄懂关键字this?一篇文章带你速通
前端·javascript
晴殇i3 小时前
for...in 循环的坑,别再用它遍历 JavaScript 数组了!
前端·javascript
海底火旺3 小时前
寻找缺失的最小正整数:从暴力到最优的算法演进
javascript·算法·面试