前言：

前端小伙伴们很多时候会遇到一个情况，就是页面中查询的时候有多个条件，可能是输入框可能是下拉框或者时间选择器，其中肯定会有一些选项是必选项，那么这时候就会出现一个情况，你需要根据必选项有没有被选中提示用户哪个必选项没有被选中，因为如果不提示，那用户点了搜索后啥反应没有会显得很呆。

一般我们可能会想到用表单验证的方式可以处理这种的，但是我感觉还是麻烦了点。所以写了个简单的方法分享出来

效果图

像这样：必选项哪个没选中就会提示出来。

上代码

     getdata() {
    
    
      //必选项的几个变量直接用数组装起来
      let effectList = [
        //输入框变量
        this.factory,
        //下拉框多选的数组
        this.shiftvalue,
        //elementul时间日期的选择器，注意要加toString，不然报错
        this.value1.toString(),
      ];
      //提前设定你的必选项提示信息
      let _effectList = ["工厂", "时间类型", "开始结束日期"];
      //用来存所有未选中的必选项提示信息
      let info = [];
      //循环必选项数组
      effectList.forEach((item, index) => {
    
    
        //判断必选项每一个的长度是否为0，等于0就代表没输入没选择。只要选择或者输入了就肯定有长度
        if (item.length == 0) {
    
    
          //循环的时候发现没有选择必选项的就用当前的角标去拿提前准备好的提示信息数组内的对应名称存到info数组内。
          info.push(_effectList[index]);
        }
      });
      //再判断info数组长度是否不等于0，不等于0就代表有值，有值就是因为上面没有选择必选项才会添加进去，才会有值
      if (info.length !== 0) {
    
    
        //elementul的提示组件，用es6的模板字符串把info展示出去，后面的字自己可以修改一下。
        this.$message({
    
    
          message: `（${
      
      info}）为必填项，请填写后从新查询！`,
          type: "warning",
        });
        //这里return很重要啊，不写就会继续执行下面的代码了，我们这里需要如果没有选中必须项就代码暂停不继续执行了。直到符合条件才继续执行下面的请求。
        return;
      }


      //这里开始下面都是请求和其他代码了，不用管，看上面就行，上面就是限制必选项的部分，把他放在你的查询方法的最上面，然后用户查询的时候就会先验证一遍，如果通过才执行这下面的代码。

      this.loading_show = true;
      this.$http({
    
    
        url: this.$http.adornUrl("/MesBalanceView/passRateAndStanded"),
        method: "get",
        params: this.$http.adornParams({
    
    
          //页数
          pageSize: this.pageSize,
          //当前页码
          currPage: 1,
          factory: this.factory,
          //硫化规格
          builddesc: this.formingMachine,
          //开始结束日期
          startTime: this.value1[0],
          endTime: this.value1[1],
          //成型时间
          timeType: this.shiftvalue,
        }),
      }).then(({
     
      data }) => {
    
    
        if (data.code == 0) {
    
    
          console.log(data, "规格合格率后台返回数据");
          this.tableData = data.page.list;
          this.totalPage = data.page.totalCount;
          this.pageIndex = data.page.currPage;
          this.loading_show = false;
        } else {
    
    
          this.$message({
    
    
            message: "没有找到有效数据",
            type: "success",
          });
        }
      });
    },