vue+elementUI 展开折叠搜索框

初级前端工程师毛毛

已于 2024-09-10 10:44:32 修改

阅读量654

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2024-09-10 10:43:59 首次发布

本文链接：https://blog.csdn.net/weixin_38891273/article/details/142092506

<template>
    <div class="left">
        <el-form id="elForm" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="审批人1">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人2">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人3">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人4">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人5">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人6">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人7">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="审批人8">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="expandFoldSearchForm">展开/折叠</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
 
<script>
export default {
  data() {
    return {
       formInline: {},
        isFold:false
    };
  },
  methods: {
    expandFoldSearchForm(){
        this.isFold = !this.isFold;
        let node = document.getElementById('elForm');
        
        let child = node.children;
        if(this.isFold){
            let w = node.offsetWidth;
            let m = node.lastElementChild.offsetWidth + getMargin(node.lastElementChild)
            
            let aw =  w - m,cw = 0 
            for (let i = 0; i < child.length-1; i++) {
                let c = child[i]
                cw += c.offsetWidth + getMargin(c)
                if(aw < cw){
                    c.style.display = 'none'
                }   
            }
        }else{
            for (let i = 0; i < child.length-1; i++) {
                child[i].style.display = ''
            }
        }
        function getMargin(n){
            let style = getComputedStyle(n)
            let m = style.marginRight.slice(0, -2)*1 + style.marginLeft.slice(0, -2)*1
            return m 
        }
    }
  }
}
</script>
<style scoped>
.left{
    padding: 50px;
}
</style>