可以根据不同的搜索条件自动排版，分为一个搜索条件，2-4个搜索条件，大于5的搜索条件具体样例见下方

封装的组件库：el-seacher.vue

<template>

 <div v-if="!isModalSearch" class="searchForm border-basic" :class="isHeaderSearch ? 'headerBack' : 'whiteBtnBgd'">

 <!-- 1个搜索条件 -->

 <el-form v-if="searchLen === 1">

 <el-form-item>

 <slot name="search1"></slot>

 </el-form-item>

 </el-form>

 <!-- 大于5个搜索条件 -->

 <el-form

 v-if="searchLen >= 5 || (dataPickerCount > 1 && searchLen > 2) || (dataPickerCount === 1 && searchLen === 5 && !isShowRemainingArea)"

 class="lc-layout__flex initSearchArea" inline :label-width="formLabelWidth" @submit.native.prevent>

 <div>

 <el-form-item class="formItem" v-for="(item, index) in showSearchLabel"

 :class="{ 'timeDataPickerWidth': item.isDataPicker }" :key="index" :label="item.label"

 :label-width="item.labelWidth ? item.labelWidth : formLabelWidth">

 <template v-if="item.sName !== 'btn'">

 <slot :name="item.sName"></slot>

 </template>

 <template v-if="item.sName === 'btn'">

 <div style="float: right;" class="commonShowCollapse lc-layout__flex ">

 <div v-if="searchLen > 5" @click="toggleCollapse" class="lc-cursor--pointer inline_block m_r_20">

 {{isShowRemainingArea ? '收起' : '展开' }}

 <i :class="!isShowRemainingArea ? 'el-icon-arrow-down' : 'el-icon-arrow-up'" />

 </div>

 <div class="inline_block">

 <slot :name="item.sName"></slot>

 </div>

 </div>

 </template>

 </el-form-item>

 </div>

 </el-form>

 <!-- 2-4个搜索条件 -->

 <el-form v-else-if="searchLen === 4 || (dataPickerCount === 1 && searchLen === 4)"

 class="lc-layout__flex initSearchArea" inline :label-width="formLabelWidth">

 <el-form-item class="formItem" :class="{ 'timeDataPickerWidth': item.isDataPicker }"

 v-for="(item, index) in showSearchLabel" :key="index" :label="item.label"

 :label-width="item.labelWidth ? item.labelWidth : formLabelWidth">

 <template>

 <slot :name="item.sName"></slot>

 </template>

 </el-form-item>

 </el-form>

 </div>

 <div v-else>

 <el-form class="lc-layout__flex initSearchArea" inline :label-width="formLabelWidth">

 <el-form-item :style="modalWidth" v-for="(item, index) in showSearchLabel" :key="index" :label="item.label"

 :label-width="item.labelWidth ? item.labelWidth : formLabelWidth">

 <template>

 <slot :name="item.sName"></slot>

 </template>

 </el-form-item>

 </el-form>

 </div>

</template>

<script>

export default {

 props: {

 searchLabel: {

 type: Array,

 default: () => [],

 },

 formLabelWidth: { // form 表单 label-width 宽度

 type: String,

 default: '72',

 },

 isHeaderSearch: {

 type: Boolean,

 default: false,

 },

 isModalSearch: {

 type: Boolean,

 default: false,

 },

 },

 data() {

 return {

 isShowRemainingArea: false,

 showTimePicker: 0,

 };

 },

 computed: {

 searchLen() {

 return this.searchLabel.length;

 },

 showSearchLabel() {

 if (this.searchLen > 5 || (this.dataPickerCount > 1 && this.searchLen > 2) || (this.dataPickerCount === 1 && this.searchLen === 5)) {

 return this.addFromItemDiv();

 }

 return this.searchLabel;

 },

 dataPickerCount() {

 let count = 0;

 this.searchLabel.forEach((e) => {

 if (e.isDataPicker) {

 count += 1;

 }

 });

 return count;

 },

 modalWidth() {

 let wPercent = Math.floor(100 / this.showSearchLabel.length);

 return `

 width: calc(${wPercent}% - 20px);

 margin-right: 20px;

 margin-bottom: 8px;

 `;

 },

 },

 methods: {

 toggleCollapse() {

 this.isShowRemainingArea = !this.isShowRemainingArea;

 },

 addFromItemDiv() {

 let tmpSearchLabel = JSON.parse(JSON.stringify(this.searchLabel));

 let curIndex = tmpSearchLabel.findIndex(e => e.sName === 'btn');

 let tmp = this.searchLabel[curIndex];

 let noBtnLabel = tmpSearchLabel.filter(e => e.sName !== 'btn');

 // 时间框分布的索引值

 let timeIndexArr = [];

 tmpSearchLabel.forEach((e, index) => {

 if (e.isDataPicker) {

 timeIndexArr.push(index);

 }

 });

 if (!this.isShowRemainingArea) {

 // 展开 只展示 4 + 1

 if (timeIndexArr.length > 0) { // 代表有时间框

 // 两个时间框

 if (timeIndexArr[1] < 2) {

 return noBtnLabel.slice(0, 2).concat(tmp);

 }

 // 一个时间框

 if ((timeIndexArr[0] < 2 && timeIndexArr[1] > 2) || (timeIndexArr.length === 1 && timeIndexArr[0] < 2)) {

 return noBtnLabel.slice(0, 3).concat(tmp);

 }

 // 没有时间框

 if (timeIndexArr[0] > 2) {

 return noBtnLabel.slice(0, 4).concat(tmp);

 }

 } else {

 return noBtnLabel.slice(0, 4).concat(tmp);

 }

 }

 // 收起 展示 全部

 let remainder = 5 - ((tmpSearchLabel.length + this.dataPickerCount) % 5);

 console.log(remainder);

 if (remainder === 0) {

 remainder = 4;

 }

 if (remainder === 5) {

 remainder = 0;

 }

 let addFromItem = {

 label: '',

 sName: '',

 };

 let addArr = [];

 for (let i = 0; i < remainder; i++) {

 addArr.push(addFromItem);

 }

 return noBtnLabel.concat(addArr, tmp);

 },

 },

};

</script>

<style lang="scss" scoped>

</style>

使用案例

<elSeacher :searchLabel="searchLabel" :formLabelWidth="'120'">

 <template #name>

 <el-input v-model="form.name"></el-input>

 </template>

 <template #threatLevel>

 <el-select v-model="form.threatLevel" placeholder="请选择" :clearable="true">

 <el-option v-for="(e, i) in threatLevelList" :label="e.label" :value="e.value" :key="i"></el-option>

 </el-select>

 </template>

 <template #ip>

 <el-input v-model="form.ip"></el-input>

 </template>

 <template #btn>

 <el-button type="primary" @click.native="searchTest">搜索</el-button>

 <el-button @click.native="resetTest">重置</el-button>

 </template>

 </elSeacher>