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

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

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

所以前端代码的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,
      },
相关推荐
猿榜22 分钟前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队23 分钟前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark23827 分钟前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia32 分钟前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia34 分钟前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
随笔记34 分钟前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆38 分钟前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang39 分钟前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
前端Hardy41 分钟前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy1 小时前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html