el-input搜索条件过多，如何设置下拉菜单，只显示第一行，点击下拉按钮触发，显示其他未显示的筛选条件。

Question

el-input搜索条件过多，如何设置下拉菜单，只显示第一行，点击下拉按钮触发，显示其他未显示的筛选条件。

<div class="flex" >
        <div  style="width:100px;">汇总跟单表</div>
        <div style="margin-left: 10px;width:80%;" >
          
          <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" class="filter-item" style="width:220px;" :picker-options="pickerOptions" @change="handleDateChange">
          </el-date-picker>

          <el-input v-model="queryList.ywh" placeholder="业务号" class="filter-item" style="width:100px;" @keyup.enter.native="handleFilter">
          </el-input>

          <el-input v-model="queryList.cghth" placeholder="采购合同号" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input>

          <el-input v-model="queryList.gys" placeholder="供应商" class="filter-item" style="width:100px;" @keyup.enter.native="handleFilter">
          </el-input>

          <el-input v-model="queryList.hm" placeholder="货名" class="filter-item" style="width:100px;" @keyup.enter.native="handleFilter">
          </el-input>

          <el-input v-model="queryList.fkje" placeholder="付款金额" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input>

          <!-- <el-date-picker v-model="queryList.fkrq" placeholder="付款日期" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-date-picker> -->

          <el-input v-model="queryList.fhsl" placeholder="发货数量" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input>

          <!-- <el-input v-model="queryList.fhrq" placeholder="发货日期" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input> -->

          <el-input v-model="queryList.spje" placeholder="收票金额" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input>

          <!-- <el-input v-model="queryList.sprq" placeholder="收票日期" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input> -->

          <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input>
          <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input> <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input> <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input> <el-input v-model="queryList.spsl" placeholder="收票数量" class="filter-item" style="width:100px;"
            @keyup.enter.native="handleFilter">
          </el-input>
     
        </div>
        <div style="width:200px;display: flex; margin-left: auto;" >
          <el-button type="primary" icon="el-icon-search" @click="fetchData()"> 查询 </el-button>
          <el-button type="default" @click="resetData()">清空</el-button>
        </div>
      </div>
     

Answer 1

你的想法很精致，非常在意用户体验，时间不多，大概解释一下我的思路：
要实现在el-input搜索条件过多时，点击下拉按钮触发显示其他未显示的筛选条件，可以考虑使用Vue.js和Element UI的组件来实现。单单使用组件是不能实现的，还是需要配合脚本来实现，您看着代码理解一下大概逻辑和处理过程：

<template>
  <div class="flex">
    <div style="width: 100px;">汇总跟单表</div>
    <div style="margin-left: 10px; width: 80%;">
      <el-date-picker
        v-model="value2"
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="filter-item"
        style="width: 220px;"
        :picker-options="pickerOptions"
        @change="handleDateChange"
      ></el-date-picker>

      <!-- 其他搜索条件 -->
      <div v-for="(item, index) in visibleInputs" :key="index">
        <el-input
          v-model="queryList[item.model]"
          :placeholder="item.placeholder"
          class="filter-item"
          style="width:100px;"
          @keyup.enter.native="handleFilter"
        ></el-input>
      </div>

      <!-- 下拉按钮 -->
      <el-button type="default" icon="el-icon-arrow-down" @click="toggleMoreFilters">
        更多条件
      </el-button>
    </div>
    <div style="width: 200px; display: flex; margin-left: auto;">
      <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value2: '', // 日期选择器的值
      pickerOptions: {
        // 日期选择器的配置选项
      },
      queryList: {
        ywh: '',
        cghth: '',
        gys: '',
        hm: '',
        fkje: '',
        fhsl: '',
        spje: '',
        spsl: '',
      },
      visibleInputs: ['ywh', 'cghth', 'gys'], // 初始显示的搜索条件
      isMoreFiltersVisible: false, // 是否显示更多条件
    };
  },
  methods: {
    handleDateChange(val) {
      // 处理日期选择器值变化
    },
    handleFilter() {
      // 处理筛选操作
    },
    toggleMoreFilters() {
      this.isMoreFiltersVisible = !this.isMoreFiltersVisible;
    },
    fetchData() {
      // 查询数据
    },
    resetData() {
      // 清空数据
    },
  },
};
</script>

在代码中可以看到，使用了一个visibleInputs数组来控制初始显示的搜索条件，点击"更多条件"按钮时切换显示更多的搜索条件。你可以根据实际需要修改visibleInputs数组，以及根据搜索条件的数量动态控制显示的搜索条件。同时，你需要在toggleMoreFilters方法中切换isMoreFiltersVisible的值来实现显示/隐藏更多条件。这只是一个大概的演示，具体的操作您需要根据自己业务进行处理，感谢，希望可以一起交流学习，非常乐意私信交流！！！