基于css样式控制

• 通过class样式绑定
  • 默认显示展开
  • 案例参考：cn.vuejs.org/v2/guide/cl… -eg

<template>
    <div class="row padding sign-data">
        <el-form :inline="true">
            <div class="unfold-wrap">
                <div class="form-items" :class="{ auto : isShow }">
                    <el-form-item label="选择日期"><el-input>测试</el-input></el-form-item>
                    <el-form-item label="选择日期"><el-input>测试</el-input></el-form-item>
                    <el-form-item label="选择日期"><el-input>测试</el-input></el-form-item>
                    <el-form-item label="选择日期"><el-input>测试</el-input></el-form-item>
                    <el-form-item label="选择日期"><el-input>测试</el-input></el-form-item>
                    <el-form-item v-if="isShow">
                        <el-button type="text" @click="isShow = !isShow">收起<i class="el-icon-arrow-up"></i></el-button>
                    </el-form-item>
                </div>
                <div v-if="!isShow">
                    <el-form-item>
                        <el-button type="text" @click="isShow = !isShow">展开<i class="el-icon-arrow-down"></i></el-button>
                    </el-form-item>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false
        };
    }
};
</script>

<style lang="scss" scoped>
// 筛选展开收起
.unfold-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    .form-items {
        flex: 1;
        height: 39px;
        overflow: hidden;
        &.auto {
            height: auto;
        }
    }
}
</style>

• 结果

  • 点击 收起显示 展开隐藏 （点击后）

  • 样式结果

    

  • 再次点击 展开显示 收起隐藏 （默认的）