标签：name objSearch 布局 element 响应 搜索 ui

需求(主要根据自己需求)：

在做系统模块中，需要搜索的功能比较多，比如时间、name、导出、导入等等、搜索栏不能在同一行（根据领导需要）(记录问题，不喜勿喷)

问题描述：

不是说屏幕小很正常，但是屏幕小一点点后面那部分就想下移，体验很不舒服

解决方案：

element ui 提供了 Layout 布局：
https://element.eleme.cn/#/zh-CN/component/layout

方案一（基础布局）

<template>
  <div class="search-main">
    <el-row>
      <el-col :span="4" class="input-div">
        <el-date-picker
          class="input-picker"
          v-model="objSearch.searchDate"
          type="daterange"
          unlink-panels
          value-format="yyyy-MM-dd"
          range-separator="到"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-col>

      <el-col :span="4" class="input-div">
        <!-- 报告类型搜索 -->
        <el-select
          class="input-div-item"
          v-model="objSearch.searchReportType"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in objSearch.searchReportTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          class="input-div-item"
          v-model="objSearch.searchImei"
          placeholder="请输入搜索值"
        ></el-input>
      </el-col>
      <el-col :span="4" class="input-div">
        <!-- 普通搜索 -->
        <el-select
          class="input-div-item"
          v-model="objSearch.searchType"
          filterable
          placeholder="请选择"
        >
          <el-option
            v-for="item in objSearch.searchKeyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          class="input-div-item"
          v-model="objSearch.searchValue"
          placeholder="请输入搜索值"
        ></el-input>
      </el-col>
      <el-col :span="6" class="input-btn">
        <el-button @click="search" type="primary" icon="el-icon-search">
          搜索
        </el-button>
        <el-button @click="refresh" type="primary" icon="el-icon-refresh">
          刷新
        </el-button>
        <el-button type="primary" icon="el-icon-document" @click="exportExcel">
          导出EXCEL
        </el-button>
      </el-col>
      <el-col :span="6" class="total">
        <el-button type="primary" icon="el-icon-files"
          >{{ objSearch.name }}报告总数:{{ objSearch.total }}份</el-button
        >
        <el-button type="primary" icon="el-icon-files"
          >{{ objSearch.name }}消耗总数:{{ objSearch.number }}次</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

解释：基础布局比响应式布局相对麻烦点，而且当屏幕缩小时，会覆盖其他的搜索栏和按钮

方案二（响应式布局）

<template>
    <div class="search-main">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
      <el-date-picker
        v-model="objSearch.searchDate"
        type="daterange"
        unlink-panels
        value-format="yyyy-MM-dd"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        >
      </el-date-picker>
      <!-- 报告类型搜索 -->
      <el-select
        class="com com-margin"
        v-model="objSearch.searchReportType"
        filterable
        placeholder="请选择"
      >
      <el-option
        v-for="item in objSearch.searchReportTypeOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
      </el-select>
      <el-input
        class="com"
        v-model="objSearch.searchImei"
        placeholder="请输入搜索值"
      ></el-input>
      <!-- 普通搜索 -->
      <el-select
        class="com com-margin"
        v-model="objSearch.searchType"
        filterable
        placeholder="请选择"
      >
      <el-option
        v-for="item in objSearch.searchKeyOptions"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
      </el-select>
      <el-input
        class="com"
        v-model="objSearch.searchValue"
        placeholder="请输入搜索值"
      ></el-input>
      <el-button @click="search" type="primary" icon="el-icon-search"
        >搜索</el-button
      >
      <el-button @click="refresh" type="primary" icon="el-icon-refresh"
        >刷新</el-button
      >
      <el-button type="primary" icon="el-icon-document" @click="exportExcel"
      >导出EXCEL</el-button
      >
      <div class="total">
        <el-button type="primary" icon="el-icon-files" size="small"
        >{{ objSearch.name }}报告总数:{{ objSearch.total
        }}份</el-button>
        <el-button type="primary" icon="el-icon-files" size="small"
        >{{ objSearch.name }}消耗总数:{{ objSearch.number
        }}次</el-button>
      </div>
       </el-col>
      </el-row>
    </div>
</template>

解释：响应式是不需要我们设置固定格子的，给它最大范围就行。

<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">

效果

总结

除了上面的两种方案，还有很多，官网也给出了很多案例，若还是不能解决你的问题，可以去看看其他大佬的文章，相信会找到你想要的方案。

标签：name,objSearch,布局,element,响应,搜索,ui
来源： https://blog.csdn.net/qq_44697754/article/details/123226035

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。