vue自定义可展开收起栅栏筛选组件

 

<template>
  <div class="header">
    <el-form ref="form" label-position="right" label-width="120px" class="forms">
      <el-row class="el-row" type="flex">
        <el-col :lg="item.lg" :md="item.md" v-for="(item,index) in gridInits" :key="index" class="el-col">
          <el-form-item :label="`${item.label}:`">
            <el-input v-model="param[item.prop]" v-if="item.type == 'input'" @keyup.enter.native="query" clearable></el-input>
            <ElSelectDic v-model="param[item.prop]" :dict="item.dict" clearable v-if="item.type == 'elSelectDic'"></ElSelectDic>
            <el-select v-model="param[item.prop]" placeholder="请选择" clearable v-if="item.type == 'select'">
              <el-option v-for="(i,k) in item.getType" :key="k" :label="i.label" :value="i.value"></el-option>
            </el-select>
            <div class="input-number-range" v-if="item.type == 'number'">
              <div class="flex">
                <div class="from">
                  <el-input ref="input_from" v-model="param[item.prop[0]]" placeholder="最小值" clearable></el-input>
                </div>
                <div class="center">
                  <span>至</span>
                </div>
                <div class="to">
                  <el-input ref="input_to" v-model="param[item.prop[1]]" placeholder="最大值" clearable></el-input>
                </div>
              </div>
            </div>
            <el-date-picker v-if="item.type == 'dateTime'" v-model="param[item.prop]" type="date" value-format="yyyy-MM-dd"></el-date-picker>
            <div style="width: 250px" v-if="item.type == 'datePicker'">
              <el-date-picker v-model="param[item.prop]" type="daterange" value-format="yyyy-MM-dd" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="6" style="margin-left: auto;">
          <div class="btm">
            <div class="btn normal-btn" @click="reset">重 置</div>
            <div class="btn primary-btn" @click="query">查 询</div>
            <div v-if="isShow" @click="collapsed">
              {{ open ? '展开' : '收起' }}
              <i :class="open ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import ElSelectDic from './ElSelectDic.vue'
export default {
  name: '',
  props: {
    isOpen: {
      type: Boolean,
      default: () => false,
    },
    isShow: {
      type: Boolean,
      default: () => true,
    },
    gridList: {
      type: Array,
      default: () => [],
    },
    showNum: {
      type: Number,
      default: () => 3,
    },
  },
  components: {
    ElSelectDic
  },
  data() {
    return {
      param: {
        page: 1,
        size: 50,
        projectId: +window.localStorage.getItem('auditImplementationId')
      },
      open: !this.isOpen,
      gridInits: [],
    };
  },
  mounted() {
    console.log(this.gridList, './');
    this.gridInits = this.$util.deepClone(this.gridList.slice(0, this.showNum))
  },
  methods: {
    reset() {
      this.param = {
        page: 1,
        size: 50,
        projectId: +window.localStorage.getItem('auditImplementationId')
      }
      this.$emit('reset', this.param)
    },
    query() {
      this.$emit('query', this.param)
    },
    collapsed() {
      this.open = !this.open
      this.$emit('calcTableHeight', this.open)
      if (this.open) {
        this.gridInits = this.$util.deepClone(this.gridList.slice(0, this.showNum))
      } else {
        this.gridInits = this.$util.deepClone(this.gridList)
      }
    }
  }
}
  </script>
  
  <style lang='less' scoped>
.header {
  padding: 0 10px;
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgba(153, 153, 153, 0.2);
  .forms {
    /deep/.el-form-item__content,
    /deep/.el-input__inner,
    /deep/.el-input__suffix,
    /deep/.el-icon-date,
    /deep/.el-date-editor .el-range__close-icon {
      height: 24px;
      line-height: 24px;
    }
    /deep/.el-input__inner {
      width: 250px;
    }
    /deep/.el-form-item {
      margin: 5px 0;
    }
    /deep/.el-form-item__label {
      color: #000;
    }
    /deep/.el-date-editor--daterange.el-input__inner {
      width: auto;
    }
    .btm {
      display: flex;
      align-items: center;
      justify-content: end;
      margin-bottom: 2px;
      > :nth-child(3) {
        width: 43px;
        margin-left: 4px;
        color: #11469a;
        i {
          font-weight: bold;
        }
        &:hover {
          color: #40a9ff;
          cursor: pointer;
        }
      }
    }
    .el-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      .input-number-range {
        position: relative;
        background-color: #fff;
        border: 1px solid #dcdfe6;
        width: 250px;
        border-radius: 2px;
        line-height: 24px;
        height: 24px;
        /deep/ .el-input__inner {
          width: 120px !important;
          border: 0px;
          margin: 0;
          background-color: transparent;
        }
        .flex {
          display: flex;
          flex-direction: row;
          width: 100%;
          justify-content: center;
          align-items: center;
          .center {
            margin-top: -2px;
          }
        }
        .is-disabled {
          background-color: #eef0f6;
          border-color: #e4e7ed;
          color: #c0c4cc;
          cursor: not-allowed;
        }
        /deep/.el-input__inner:focus {
          box-shadow: 0 0 !important;
        }
      }
    }
  }
}
</style>

组件引用

   <headGrid ref="Grid" :isOpen="false" :gridList="gridList" @query="query" @reset="reset" @calcTableHeight="calcTableHeight" />