vue实现筛选动态配置

<el-form  :class="cellStyleForm()" :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
        <el-form-item v-for="item in requiredParamList" :key="item.materialCode" :prop="item.materialValue">
            <el-select
            v-if="item.inputType === 'select'"
            v-model="queryParams[item.materialValue]"
            :placeholder="'请选择'+item.materialLabel"
            @change="handleQuery"
            clearable
            filterable
          >
            <el-option
              v-for="dict in item.options"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
          <el-input
              v-else
              v-model="queryParams[item.materialValue]"
              :placeholder="'请输入'+item.materialLabel"
              clearable
              @clear="handleQuery"
              @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        
        <el-form-item class="option-button">
          <el-popover
            placement="right"
            width="650"
            style="margin-right: 20px"
            trigger="click">
            <el-transfer v-model="transfers" :props="{ key: 'materialValue', label: 'materialLabel'}" :titles="['待选择', '已选择']"
                        @change="rightcheckchange"
                         :data="searchOptions"
            />
            <el-button type="primary"  size="mini"  slot="reference">
              <el-button-context class-name="fun-system" text="筛选项"/>
            </el-button>
          </el-popover>
          <el-button type="primary"  size="mini" @click="handleQuery">
            <el-button-context class-name="fun-search" text="查询"/>
          </el-button>
        </el-form-item>
      </el-form>

cellStyleForm(){
      if(this.$refs.queryForm) {
        this.width = this.$refs.queryForm.$el.clientWidth
        if(226*(this.requiredParamList.length+1)+40>=this.width){
          return 'mpc-section-zkaw'
        }else{
          return 'mpc-section'
        }
      }else{
        return 'mpc-section'
      }
    },

rightcheckchange(){
      this.requiredParamList = [];
      for(let i=0;i<this.transfers.length;i++){
        for(let j=0;j<this.searchOptions.length;j++){
          if(this.transfers[i] === this.searchOptions[j].materialValue){
            this.requiredParamList.push(this.searchOptions[j])
          }
        }
      }
    },