postdischarge-ui/src/views/components/SearchForm.vue

<template>
    <Form ref="form" :label-width="labelWidth" :size="size" style="display: flex;">
        <div id="searchFilter" ref="searchFilter" :gutter="10" style="display: flex; flex-wrap: wrap;"
            :style="{ width: widths + '%' }">
            <slot></slot>
        </div>
        <div style="width:20%;text-align:right;padding-right:18px;">
            <Button type="primary" @click="handleQuery" size="mini">搜索</Button>
            <Button @click="handleReset" size="mini">重置</Button>
            <Button v-show="collapsiable" type="text" @click="shiftCollapsiable" size="mini">
                <span>
                    {{ fold ? '收起' : '展开' }}
                    <i :class="fold ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
                </span>
            </Button>
        </div>
    </Form>
</template>
<script>
import { Form, FormItem, Button } from 'element-ui'
export default {
    name: 'SearchFilter',
    components: { Form, FormItem, Button },
    props: {
        labelWidth: {
            type: String,
            default: '80px',
        },
        widths: {
            type: Number,
            default: 80,
        },
        labelWidths: {
            type: Number,
            default: 280,
        },
        size: {
            type: String,
            default: 'small',
        },
    },
    data() {
        return {
            collapsiable: false,
            fold: false,
            // 最大展示数，默认3个，超过则隐藏，为0时不限制
            maxShow: undefined,
        }
    },
    mounted() {
        // 通过最大显示个数控制展开/折叠
        this.minShowCtrol()
        this.$emit('fold',this.fold)

    },
    watch: {
        '$store.state.app.sidebar.opened'(newVal, Val) {
            if (newVal) {
                const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
                group[this.maxShow - 1].hidden = true
            }
            setTimeout(() => {
                this.minShowCtrol()
            }, 500);
        }
    },
    methods: {
        // 屏幕resize监听
        screenChange() {
            // 屏幕resize监听事件：一旦屏幕宽高发生变化，就会执行resize
            window.addEventListener('resize', this.minShowCtrol, true)
            // 将屏幕监听事件移除
            // 这步是必须的。离开页面时不移除，再返回，或者进入到别的有相同元素的页面会报错
            // 或者将这里的方法直接写在beforeDestroy函数中也可以
            this.$once('hook:beforeDestroy', () => {
                window.removeEventListener('resize', this.minShowCtrol, true)
            })
        },
        shiftCollapsiable() {
            this.fold = !this.fold
            this.$emit('fold',this.fold)
            this.minShowCtrol()
        },
        // 通过maxShow控制元素显示/折叠
        minShowCtrol() {
            this.maxShow = Math.floor(this.$refs.searchFilter.offsetWidth / this.labelWidths)
            const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.size}`)
            const len = group?.length ? group?.length - 1 : 0
            if (this.maxShow < len) {
                group.forEach((item, index) => {
                    item.hidden = false
                    if (index > this.maxShow - 1) {
                        item.hidden = !this.fold
                    }
                })
                this.collapsiable = true
            } else {
                this.collapsiable = false
            }
            this.screenChange();
            this.$emit('minShowCtrol')
        },
        handleQuery() {
            this.$emit('search')
        },
        handleReset() {
            this.$emit('reset')
        },
    },
}
</script>
<style lang="scss" scoped>
::v-deep .el-form-item {
    height: 28px !important;
}
</style>