Vue2.0+ElementUI实现查询条件展开和收起功能组件

一、需求

el-form如果查询条件过多，影响页面的展示效果。
查询条件表单是我们系统中非常常见的功能，我们需要把它封装成一个通用的组件，方便在系统开发中提升开发效率。
除了在实现基本查询条件的功能上，还需要实现多条件的折叠和展开功能

二、效果图

在这里插入图片描述

三、代码示例

封装查询条件表单组件 SearchButton.vue

<template>
  <div>
    <el-col :span="1.5" class="elrow">
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini">查询</el-button>
      </el-form-item>
    </el-col>
    <el-col :span="1.5" class="elrow">
      <el-form-item>
        <el-button type="primary" icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-col>
    <el-col :span="1.5" class="elrow">
      <el-form-item>
        <el-button type="text" size="mini" @click="closeSearch">
          {{ word }}
          <i :class="showAll ? 'el-icon-arrow-up ': 'el-icon-arrow-down'" />
        </el-button>
      </el-form-item>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    showAll: {
      type: Boolean,
      defalut: true
    }
  },
  computed: {
    word: function() {
      if (this.showAll === false) {
        // 对文字进行处理
        return '展开搜索'
      } else {
        return '收起搜索'
      }
    }
  },
  mounted() {
    /**
			 * 收起搜索
			 */
    this.$nextTick(function() {
      this.closeSearch()
    })
  },
  methods: {
    closeSearch() {
      //					this.showAll = !this.showAll;
      this.$emit('closepop')
      console.log('子组件的状态：' + this.showAll)
    }
  }
}
</script>

<style>
</style>

使用查询条件表单组件（引入组件即可）

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-form ref="condForm" :model="condForm" label-width="100px" :inline="true">
        <el-row class="btnRow">
          <el-col :span="6" class="elrow">
            <el-form-item label="线索编号1" prop="xsbh" style="padding-left: 10px;">
              <el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="elrow">
            <el-form-item label="线索类型1" prop="xslx">
              <el-select v-model="condForm.xslx" size="mini" style="width: 160px;">
                <el-option
                  v-for="item in xslxoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="elrow">
            <el-form-item label="线索来源1" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" :class="!showAll ? 'btnRow' : 'unBtnRow'">
            <el-form-item label="线索编号1" prop="xsbh" style="padding-left: 10px;">
              <el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" />
            </el-form-item>
          </el-col>
          <search-button v-show="showAll" :show-all="showAll" @closepop="closepop" />
        </el-row>
        <el-row :class="!showAll ? 'btnRow' : 'unBtnRow'">
          <el-col :span="6" class="elrow">
            <el-form-item label="线索编号2" prop="xsbh" style="padding-left: 10px;">
              <el-input v-model="condForm.xsbh" size="mini" clearable style="width: 160px;" />
            </el-form-item>
          </el-col>
          <el-col :span="6" class="elrow">
            <el-form-item label="线索类型2" prop="xslx">
              <el-select v-model="condForm.xslx" size="mini" style="width: 160px;">
                <el-option
                  v-for="item in xslxoptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <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 :span="6" class="elrow">
            <el-form-item label="线索来源2" prop="xsxz">
              <el-select v-model="condForm.xsxz" size="mini" style="width: 160px;">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <SearchButton v-show="!showAll" :show-all="showAll" @closepop="closepop" />
        </el-row>
      </el-form>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      size="medium"
      :header-cell-style="{background:'#f5f7fa'}"
      :height="tableHeight"
      stripe
      fit
      highlight-current-row
      border
      style="width: 100%;height:50px"
    >
      <el-table-column type="selection" width="55" align="center" </el-table-column>
        <el-table-column type="index" width="55" align="center" label="序号" min-width="209" />
        <el-table-column label="查看" width="60" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" align="center">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="删除" width="60" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" align="center">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="jhbh" label="计划编号" :show-overflow-tooltip="true" align="center" />
        <el-table-column prop="xszt" label="状态" align="center" min-width="100" />
      </el-table-column></el-table>
    <!--分页查询工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination
        style="margin-right: 8px;text-align: right;"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        :total="totalPage"
        :current-page.sync="pageIndex"
        background
        layout="total, sizes, prev, pager, next, jumper"
      />
    </el-col>
  </div>
</template>

<script>
import SearchButton from '@/components/SearchButton/index.vue'
export default {
  name: 'User',
  dicts: ['sys_normal_disable', 'sys_user_sex'],
  components: {
    SearchButton
  },
  data() {
    return {
      showAll: true,
      tableData: [],
      // 查询条件form
      condForm: {},
      condition: '',
      xslxoptions: [{
        id: '1',
        name: '土地'
      },
      {
        id: '2',
        name: '房屋'
      },
      {
        id: '3',
        name: '矿产'
      }
      ],
      options: [{
        value: '1',
        label: '动态巡查'
      }, {
        value: '2',
        label: '电话举报'
      }, {
        value: '3',
        label: '信访举报'
      }, {
        value: '4',
        label: '媒体曝光'
      }, {
        value: '5',
        label: '其他单位转交'
      }, {
        value: '6',
        label: '其他'
      }],
      pageIndex: 0,
      pageSize: 0,
      pageSizes: [20, 50, 100, 200],
      totalPage: 0
      //					height: window.innerHeight - 200,
    }
  },
  computed: {
    tableHeight() {
      if (this.showAll) {
        return window.innerHeight - 140
      } else {
        return window.innerHeight - 200
      }
    }
  },
  methods: {
    closepop() {
      this.showAll = !this.showAll
      console.log('父组件的状态：' + this.showAll)
    }
  }
}
</script>
<style>
	.btnRow {
		display: block;
	}

	.unBtnRow {
		display: none;
	}
</style>