vue实现筛选动态配置

亦凉 2023-10-08 21:51 2阅读 0赞

<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])
              }
            }
          }
        },