element ui搜索栏响应式布局_elementui 搜索框怎么布局

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

在做系统模块中，需要搜索的功能比较多，比如时间、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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

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

方案二（响应式布局）

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

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

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

效果

总结

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