最近一直在用element ui做后臺(tái)項(xiàng)目，因?yàn)楹笈_(tái)項(xiàng)目，通常檢索條件過多，都展示出來的話占用頁(yè)面空間過大，也不美觀，所以就仿照ant design來了一波展開/收起的小操作，給大家看一下樣品先！

QQ截圖20201028093059.png

因?yàn)槭腔趀lement ui 做的，所以不免的要用到它的柵格布局，這樣我們的搜索框能達(dá)到一種屏幕上的響應(yīng)式布局。來吧，廢話不多說，先上代碼;
其中一些關(guān)鍵點(diǎn)我都在代碼里寫上了注釋，同學(xué)們要細(xì)心一點(diǎn)看喲！

<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="產(chǎn)品名稱">
            <el-input v-model="form.name" placeholder="請(qǐng)輸入產(chǎn)品名稱" />
          </el-form-item>
        </el-col>
        <el-col :md="8" :sm="12">
          <el-form-item label="產(chǎn)品類型">
            <el-select v-model="form.type" class="width-full" placeholder="請(qǐng)選擇產(chǎn)品類型">
              <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="產(chǎn)品類型">
            <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來判斷是否顯示那些被深深包裹的檢索條件，還涉及到一個(gè)知識(shí)點(diǎn)，
          我們用v-show而不用v-if，是因?yàn)檫@里需要頻繁切換，v-show和v-if應(yīng)用不清楚
          的同學(xué)要去好好學(xué)習(xí)一下啦-->
          <div v-show="advanced">
            <el-col :md="8" :sm="12">
              <el-form-item label="產(chǎn)品類型">
                <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="產(chǎn)品名稱">
                <el-input v-model="form.name" placeholder="請(qǐng)輸入產(chǎn)品名稱" />
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="12">
              <el-form-item label="產(chǎn)品類型">
                <el-select v-model="form.type" class="width-full" placeholder="請(qǐng)選擇產(chǎn)品類型">
                  <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="產(chǎn)品類型">
                <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="產(chǎn)品名稱">
                <el-input v-model="form.name" placeholder="請(qǐng)輸入產(chǎn)品名稱" />
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="12">
              <el-form-item label="產(chǎn)品類型">
                <el-select v-model="form.type" class="width-full" placeholder="請(qǐng)選擇產(chǎn)品類型">
                  <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="產(chǎn)品類型">
                <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="產(chǎn)品名稱">
                <el-input v-model="form.name" placeholder="請(qǐng)輸入產(chǎn)品名稱" />
              </el-form-item>
            </el-col>
            <el-col :md="8" :sm="12">
              <el-form-item label="產(chǎn)品類型">
                <el-select v-model="form.type" class="width-full" placeholder="請(qǐng)選擇產(chǎn)品類型">
                  <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動(dòng)態(tài)賦值，
            添加一個(gè)三元判斷，判斷icon是向下還是向上，這個(gè)向下向的狀態(tài)是基于
            advanced的狀態(tài) -->
            <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
          </a>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

這里是html布局，具體一行顯示幾個(gè)。我們可以調(diào)整每一個(gè)<el-col>屬性上:md/:sm的數(shù)字。
這里我們看到一個(gè)element ui的內(nèi)置動(dòng)畫，<el-collapse-transition>，他給收起和展開帶上了一個(gè)transition飄柔，過渡起來更柔順，嘎嘎嘎。

QQ截圖20201028093257.png

下面我們來看js代碼；

<script>
export default {
  name: 'collapsePanel',
  data() {
    return {
      //select選項(xiàng)
      options: [{
        value: '選項(xiàng)1',
        label: '黃金糕'
      }, {
        value: '選項(xiàng)2',
        label: '雙皮奶'
      }, {
        value: '選項(xiàng)3',
        label: '蚵仔煎'
      }, {
        value: '選項(xiàng)4',
        label: '龍須面'
      }, {
        value: '選項(xiàng)5',
        label: '北京烤鴨'
      }],
      //時(shí)間日期組件
      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)
          }
        }]
      },
      //我們給搜索條件綁定的表單對(duì)象
      form: {
        name: '',
        type: '',
        date: ''
      },
      advanced: false,//這個(gè)是關(guān)鍵，我們用它來判斷展開/收起
    }
  },
  mounted() {

  },
  methods: {
    //一個(gè)簡(jiǎn)單的js，點(diǎn)擊文字，改變狀態(tài)
    toggleAdvanced() {
      this.advanced = !this.advanced
    }
  }
}
</script>

最后呢，我們?cè)賮硪欢蝐ss，因?yàn)橄吕蚝腿掌诮M件這種，不能撐滿el-col劃分出來的塊，所以需要我們手動(dòng)來給個(gè)百分百寬度的樣式，這樣看起來更好一些。

<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>

最后，呈上代碼效果。是不是覺得很簡(jiǎn)單，快動(dòng)手試試吧。紙上得來終覺淺，絕知此事要躬行，同學(xué)們要上手多多練習(xí)啊。前端小白，在線裝逼。給我呂某人一個(gè)面子，別打臉。

QQ截圖20201028095423.png

感覺對(duì)您有用的麻煩給個(gè)小心心，謝謝！