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

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

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

所以前端代码的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,
      },
相关推荐
伍哥的传说5 小时前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang4536 小时前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
苹果醋36 小时前
iview中实现点击表格单元格完成编辑和查看(span和input切换)
运维·vue.js·spring boot·nginx·课程设计
武昌库里写JAVA6 小时前
iView Table组件二次封装
vue.js·spring boot·毕业设计·layui·课程设计
Trust yourself2436 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
前端工作日常7 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
Feather_748 小时前
从Taro的Dialog.open出发,学习远程控制组件之【事件驱动】
javascript·学习·taro
\光辉岁月/8 小时前
Axios基本使用
javascript·axios
波波鱼દ ᵕ̈ ૩9 小时前
学习:JS[6]环境对象+回调函数+事件流+事件委托+其他事件+元素尺寸位置
前端·javascript·学习
cypking9 小时前
解决electron+vue-router在history模式下打包后首页空白问题
javascript·vue.js·electron