背景

在crm系统中，有时form表单字段非常多，而实际需要查询的条件只有几个，一是占用空间多，二是从非常多的字段中不太好寻找，所以，需要做一个字段筛选模版，只选择有效的字段展示。效果如图：

image.png

在此，给其封装成一个组件。

如何使用

在父级里，
1、引入组件

import FilterFields from "@/components/filterFields/index"

2、注册组件

components: {
    FilterFields
  },

3、调用组件

<FilterFields ref="filterFields" :filterColumns.sync="filterForm"></FilterFields>

4、初始化数据

      filterForm: {
        tableName: 'param',
        filtrateVisible: false,
        checkedColumn: ['ids', 'title', 'sourceId', 'country', 'language', 'status', 'sourceType', 'firstTag', 'sublibraries', 'sourceUserId', 'authorId', 'createStartTime', 'publishTime', 'durationMin'],
        defaultShow: true,
        showColumnsKey: 'APOLLO_miniVideo_form_columns'
      }

mounted() {
    this.$refs.filterFields.initFormFields('param') 
 },

param表示父表单的ref值

5、模板中使用

<el-button type="primary" @click="filterForm.filtrateVisible = !filterForm.filtrateVisible">more</el-button>
    <el-form-item 
            v-if="filterForm.defaultShow || filterForm.checkedColumn.indexOf('ids') !== -1" 
            prop="ids"
            checkLabel="IDS">
            <el-input
              v-model="param.ids"
              :clearable="true"
              :placeholder="$t('shortVideo.id')"
              type="textarea"
              rows="1"
            ></el-input>
          </el-form-item>

点击more按钮，表单条件筛选框显示。filterForm.checkedColumn控制表单条件是否展示。注意：一定要写上prop="ids" checkLabel="IDS"。

组件具体实现

<template>
  <div>
    <el-dialog :visible.sync="filterColumns.filtrateVisible" width="800px" class="filtrate-dialog">
      <el-checkbox :indeterminate="filtrateIsIndeterminate" v-model="filtrateCheckAll" @change="handleCheckAllChange" class="select-all">{{ $t("common.select_all") }}</el-checkbox>
      <el-checkbox-group v-model="filterColumns.checkedColumn" @change="handleCheckedFiltateChange">
        <template v-for="column in columnList">
          <el-checkbox v-if="column.property" :label="column.property" :key="column.id" :title="column.label">{{ column.label }}</el-checkbox>
        </template>
      </el-checkbox-group>
    </el-dialog>
  </div>
</template>
<script>
const ls = localStorage;
export default ({
  props: {
    filterColumns: {
      type: Object
    }
  },
  data () {
    return {
      filtrateIsIndeterminate: true,
      filtrateCheckAll: true,
      columnList: []
    }
  },
  methods: {
    /** 初始化表格展示箱 */
    initFormFields(table) {
      // console.log('---ref---', this.$parent.$refs[table])
      this.$parent.$refs[table].fields.forEach(((field) => {
        if (field.prop) {
          this.columnList.push({
            id: field.id,
            property: field.prop,
            label: field.$attrs.checkLabel
          })
        }
      }))
      this.$parent.filterForm.defaultShow = false;
      this.filterColumns.checkedColumn = JSON.parse(ls.getItem(this.filterColumns.showColumnsKey)) || this.filterColumns.checkedColumn;
    },
    /** 表格列显示控制 */
    handleCheckAllChange(val) {
      this.filterColumns.checkedColumn = val ? this.columnList.map((column) => column.property) : [];
      this.filtrateIsIndeterminate = false;
      ls.setItem(this.filterColumns.showColumnsKey, JSON.stringify(this.filterColumns.checkedColumn));
    },
    /** 表格列显示项选中变化 */
    handleCheckedFiltateChange(val) {
      const checkedCount = val.length;
      this.filtrateCheckAll = checkedCount === this.columnList.length;
      this.filtrateIsIndeterminate = checkedCount > 0 && checkedCount < this.columnList.length;
      ls.setItem(this.filterColumns.showColumnsKey, JSON.stringify(this.filterColumns.checkedColumn));
    },
  }
})
</script>
<style lang="scss">
.el-checkbox {
  width: 120px;
}
</style>