最近一直在用element ui做后台项目，因为后台项目，通常检索条件过多，都展示出来的话占用页面空间过大，也不美观，所以就仿照ant design来了一波展开/收起的小操作，给大家看一下样品先！
QQ截图20201028093059.png
因为是基于element ui 做的，所以不免的要用到它的栅格布局，这样我们的搜索框能达到一种屏幕上的响应式布局。来吧，废话不多说，先上代码;
其中一些关键点我都在代码里写上了注释，同学们要细心一点看哟！
<template>
<div class="dashboard-container">
<el-form ref="form" :model="form" label-width="80px">
<el-row :gutter="20">
<el-col :md="8" :sm="12">
<el-form-item label="产品名称">
<el-input v-model="form.name" placeholder="请输入产品名称" />
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-select v-model="form.type" class="width-full" placeholder="请选择产品类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-date-picker
v-model="form.date"
class="width-full"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions"
/>
</el-form-item>
</el-col>
<el-collapse-transition>
<!-- 这里我们用v-show来判断是否显示那些被深深包裹的检索条件，还涉及到一个知识点，
我们用v-show而不用v-if，是因为这里需要频繁切换，v-show和v-if应用不清楚
的同学要去好好学习一下啦-->
<div v-show="advanced">
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-date-picker
v-model="form.date"
class="width-full"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions"
/>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品名称">
<el-input v-model="form.name" placeholder="请输入产品名称" />
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-select v-model="form.type" class="width-full" placeholder="请选择产品类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-date-picker
v-model="form.date"
class="width-full"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions"
/>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品名称">
<el-input v-model="form.name" placeholder="请输入产品名称" />
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-select v-model="form.type" class="width-full" placeholder="请选择产品类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-date-picker
v-model="form.date"
class="width-full"
align="right"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions"
/>
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品名称">
<el-input v-model="form.name" placeholder="请输入产品名称" />
</el-form-item>
</el-col>
<el-col :md="8" :sm="12">
<el-form-item label="产品类型">
<el-select v-model="form.type" class="width-full" placeholder="请选择产品类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
</div>
</el-collapse-transition>
<div class="right-handle-group">
<el-button-group>
<el-button type="primary" icon="el-icon-search">查询</el-button>
<el-button type="primary" icon="el-icon-magic-stick">重置</el-button>
</el-button-group>
<a style="margin-left: 8px" @click="toggleAdvanced">
{{ advanced ? '收起' : '展开' }}
<!-- 我们通过vue给class动态赋值，
添加一个三元判断，判断icon是向下还是向上，这个向下向的状态是基于
advanced的状态 -->
<i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
</a>
</div>
</el-row>
</el-form>
</div>
</template>
这里是html布局，具体一行显示几个。我们可以调整每一个<el-col>属性上:md/:sm的数字。
这里我们看到一个element ui的内置动画，<el-collapse-transition>，他给收起和展开带上了一个transition飘柔，过渡起来更柔顺，嘎嘎嘎。
QQ截图20201028093257.png
下面我们来看js代码；
<script>
export default {
name: 'collapsePanel',
data() {
return {
//select选项
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
//时间日期组件
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date())
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}]
},
//我们给搜索条件绑定的表单对象
form: {
name: '',
type: '',
date: ''
},
advanced: false,//这个是关键，我们用它来判断展开/收起
}
},
mounted() {
},
methods: {
//一个简单的js，点击文字，改变状态
toggleAdvanced() {
this.advanced = !this.advanced
}
}
}
</script>
最后呢，我们再来一段css，因为下拉框和日期组件这种，不能撑满el-col划分出来的块，所以需要我们手动来给个百分百宽度的样式，这样看起来更好一些。
<style lang="scss" scoped>
.dashboard {
&-container {
margin: 30px;
}
&-text {
font-size: 30px;
line-height: 46px;
}
}
.width-full{width: 100%;}
.right-handle-group{float: right;}
</style>
最后，呈上代码效果。是不是觉得很简单，快动手试试吧。纸上得来终觉浅，绝知此事要躬行，同学们要上手多多练习啊。前端小白，在线装逼。给我吕某人一个面子，别打脸。
QQ截图20201028095423.png
感觉对您有用的麻烦给个小心心，谢谢！
网友评论