通用表格自适应筛选栏组件

1、组件功能

      实现不同尺寸的电脑设备查看页面的时候能自适应展示搜索栏，搜索和重置按钮一直在第一排        右边  

2 、实现效果

最大屏效果

普通屏幕效果

笔记本，ipad效果

代码

<template>
  <div class="main-search" :class="{resizing: resizing, 'one-row': showMore && !showSearch}" ref="mainSearch" style="background:#FFF">
    <el-form ref="form" label-width="90px" :inline="true" :model="model" style="width: 100%;padding:10px 20px;box-sizing: border-box;">
      <div class="search-box">
        <div>
          <slot></slot>
        </div>
        <div class="query-box">
          <el-form-item>
            <el-button type="primary" size="small" @click="onSearch">查询</el-button>
            <el-button size="small" style="color:#3065FF" plain @click="onReset">重置</el-button>
            <search-fold v-if="showMore" :showSearch="showSearch" @showSearchClick="showSearchClick"></search-fold>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { debounce } from 'lodash';
import searchFold from '@/components/SearchFold/index.vue';
export default {
  name: 'SearchFormLayout',
  props: {
    model: {
      type: Object,
      default: () => ({})
    },
    rules: {
      type: Object,
      default: () => ({})
    }
  },
  components: { searchFold },
  data() {
    return {
      showSearch: false,
      formItemList: [],
      resizing: true,
      offsetHeight: 0
    };
  },
  computed: {
    showMore() {
      if(this.formItemList.length === 0) return true;
      return this.formItemList.some(item => !item.show);
    }
  },
  created() {},
  mounted() {
    // 获取每个表单项的宽度
    // let box = this.$el.querySelector('.search-box div:first-child')
    // let l = box.querySelectorAll('.el-form-item')
    let l = this.$el.querySelectorAll('.search-box div:first-child .el-form-item');
    // console.log('$el', this.$el, 'l', l)
    let getEleWidth = ele => {
      let style = window.getComputedStyle(ele);
      let width = parseFloat(style.width);
      let margin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);
      return width + margin;
    };
    Array.from(l).forEach(item => {
      let width = getEleWidth(item);
      this.formItemList.push({ $el: item, width, show: false });
    });
    // console.log('formItemList', this.formItemList)
    window.addEventListener('resize', this.onResize);
    this.doResize();
    setTimeout(() => {
      this.resizing = false;
      this.offsetHeight = this.$el.offsetHeight;
    }, 100);
  },
  destroyed() {
    // console.log('seachFormLayout destroyed')
    window.removeEventListener('resize', this.onResize);
  },
  methods: {
    onSearch() {
      this.$emit('handelSearch');
    },
    onReset() {
      this.$emit('handelReset');
    },
    showFormItem(index) {
      return this.formItemList.length === 0 || this.formItemList[index].show || this.showSearch;
    },
    resetFields() {
      this.$refs.form.resetFields();
    },
    async doResize() {
      // console.log('doResize')
      //获取窗口宽度
      let windowWidth = window.innerWidth;
      //获取.search-box > div:first-child的宽度
      let formItemWidth = this.$el.querySelector('.search-box > div:first-child').offsetWidth;
      // console.log(this.$el.querySelector('.search-box > div:first-child'))
      // console.log('windowWidth', windowWidth, 'formItemWidth', formItemWidth)
      let width = 0;
      this.formItemList.forEach((item, index) => {
        width += item.width;
        // console.log('width', width)
        item.show = width <= formItemWidth;
        this.showFormItem(index) ? item.$el.classList.remove('hide') : item.$el.classList.add('hide');
      });
      await this.$nextTick();
      this.offsetHeight = this.$el.offsetHeight;
      // console.log('this.formItemList', this.formItemList)
    },
    onResize: debounce(async function () {
     this.doResize()
    }, 50),
    async showSearchClick() {
      this.showSearch = !this.showSearch;
      this.$emit('changeTableHeight');
      // 兼容之前的触发方式
      await this.$nextTick();
      this.offsetHeight = this.$el.offsetHeight;
      window.dispatchEvent(new Event('resize'));
    }
  },
  watch: {
    showSearch(val) {
      this.onResize();
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/yh.scss';
.main-search {
  &.resizing {
    visibility: hidden;
  }
  &.one-row {
    .search-box {
      height: 36px;
      overflow-y: hidden;
    }
  }
}
.query-box {
  flex-shrink: 0;
  align-self: auto;
}
.search-box {
  align-items: flex-start;
}
.search-box > div:first-child {
  flex: 1;
}
::v-deep .orgSelect .el-select {
  margin-right: 16px;
}
::v-deep .orgSelect .el-select:last-child {
  margin-right: 0;
}
</style>