当下拉框选项为空时，禁用搜索按钮

Question

我要的效果是下拉框里没有值的时候，用户点击搜索按钮，禁用，或者后台不执行方法

这是下拉框的代码

 <Col span="4" style="padding-right:10px">
        <Select v-model="key.getExhibitList" @on-query-change="getSource(key.getExhibitList)">
          <Option v-for="item in getExhibitList" :value="+item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </Col>

搜索按钮

<Button type="primary" @click="getStat()">搜索</Button>

方法

getStat(data) {
      if(this.key.getExhibitList == 0){
        
      }
      if (data && data > 1) {
        this.page.page = data;
      } else {
        this.page.page = 1;
      }
      this.isLoadingData = true;
      let params = {
        page: this.page.page, //传当前为第几页
        size: this.get.size, //当前分页大小
        stat_type: this.get.stat_type1, //统计方式 1-pv 2-预报名数
        exhibit_id: this.key.getExhibitList,
        source: this.key.getExhibitChannel
      };
      http.post(pageUrl.getExhibitStat, params).then(res => {
        this.data3 = res.data.data.list || [];
        this.page.countPV = parseInt(res.data.data.count);
        this.getChartDataPv(res.data.data.list[0]);
        this.gettype();
        this.isLoadingData = false;
      });
    },

Answer 1

解决方法：

在搜索按钮那里加两个span 一个if 一个else 满足条件的时候就显示某一个

  <span v-if="this.key.getExhibitChannel != '' ">
  
  <Button type="primary" @click="getStat()">搜索</Button>
  
  </span>
  
  
  <span v-else>
  
  <Button type="primary" @click="getStat()" disabled>请选择查询信息</Button>
  
  </span>

Answer 2

给搜索按钮加上一个 :disabled 的计算属性。条件满足时返回 false 。

Answer 3

后台不执行，加个开关，默认是下拉框都是没值的，当都存在的时候开关为true并且调用接口，不为true就return掉