ListSearch.vue

<template>
  <div class="m-table-search">
    <slot v-bind:searchToggle="searchToggle"></slot>
    <div v-if="formCount>3" :class="searchToggle? (formCount%3 == 0?'m-table-search-operation':'m-table-search-operation-bottom'): 'm-table-search-operation-top'" >
      <el-button size="small" @click="handleReset">{{ $t('buttons.reset') }}</el-button>
      <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">{{ $t('buttons.query') }}</el-button>
      <el-button type="text" @click="handleToggleSearch">
        {{searchToggle? $t('buttons.fold') : $t('buttons.unfold') }}
        <i :class="searchToggle? 'el-icon-arrow-up': 'el-icon-arrow-down'"></i>
      </el-button>
    </div>
    <div v-if="formCount <= 3" :class="formCount == 3? 'm-table-search-operation': 'm-table-search-operation-top'">
      <el-button size="small" @click="handleReset">{{ $t('buttons.reset') }}</el-button>
      <el-button type="primary" icon="el-icon-search" size="small" @click="handleSearch">{{ $t('buttons.query') }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    formCount: {
      type: Number,
      default: 6
    }
  },
  data: function () {
    return {
      searchToggle: false
    }
  },
  created: function () {
    if (this.formCount <= 3) {
      this.searchToggle = true
    }
  },
  methods: {
    handleReset: function () {
      this.$emit('form-reset')
    },
    handleSearch: function () {
      this.$emit('form-search')
    },
    handleToggleSearch: function () {
      this.searchToggle = !this.searchToggle
      this.$emit('search-toggle', this.searchToggle)
    },
  }
}
</script>

<style>
.m-table-search {
  position: relative;
  margin: -20px 0 0 0;
  padding: 20px 0px 10px 20px;
  border-bottom: 10px solid rgb(232, 232, 232);
}
.m-table-search-operation {
  text-align: right;
}
.m-table-search-form {
  position: flex;
  flex-direction: row;
}
.m-table-search-form .el-form-item__content {
  width: calc(100% - 110px);
}
/* .m-table-search-form .el-form-item {
  width: 33%;
  margin-right: 0;
  padding-right: 20px;
  box-sizing: border-box;
}
.m-table-search-form .el-form-item:nth-child(3n) {
  padding-right: 0;
} */

.m-table-operation {
  margin-top: 15px;
}
.m-table-search-operation-top {
  /* position: absolute; */
  right: 20px;
  top: 20px;
  text-align: right;
}
.m-table-search-operation-bottom {
  position: absolute;
  right: 20px;
  bottom: 30px;
}
.el-button+.el-button {
    margin-left: 7px;
}
</style>