基于element ui的收起展开检索条件效果

最近一直在用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

感觉对您有用的麻烦给个小心心，谢谢！