背景

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

image.png

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

如何使用

1、引入组件

import FilterColumns from "@/components/filterColumns/index

2、注册组件

  components: {
    FilterColumns
  },

3、调用组件

<FilterColumns ref="filterColumns" :filterColumns.sync="filterColumns"></FilterColumns>

4、初始化数据

filterColumns: {
        tableName: 'pushMultipleTable',
        filtrateVisible: false,
        checkedColumn: [
        'itemId',
        'title',
        'subtitle',
        'icon',
        'pushTimeliness',
        'updatedUser',
        'updatedTime',
        's3Link', 
        'appIds',
        'countries',
        'language',
        'publishTime',
        ],
        // columnList: [],
        defaultShow: true,
        showColumnsKey: 'MEDIA_push_show_columns'
      },

mounted() {
    this.$refs.filterColumns.initTableColumn('pushMultipleTable')
  },

5、模版使用

          <template slot="header">
            <!-- 过滤展示相 -->
            <el-button type="text" class="filtrate-btn" @click="filterColumns.filtrateVisible = !filterColumns.filtrateVisible">
              <svg-icon iconClass="filtrate"></svg-icon>
            </el-button>
          </template>
<el-table-column v-if="filterColumns.defaultShow || filterColumns.checkedColumn.indexOf('feedTimelines') !== -1" prop="feedTimelines" :label="$t('pushEdit.feedTimelines')" width="150"></el-table-column>

组件具体实现

<template>
  <div>
    <el-dialog :title="$t('pushEdit.editInfos')" :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: {
    /** 初始化表格展示箱 */
    initTableColumn(table) {
      // 获取table所有可以自定义显示隐藏的列
      console.log('===', this.$parent)
      this.$parent.$refs[table].columns.forEach((column) => {
        if (column.property) {
          this.columnList.push({
            id: column.id,
            property: column.property,
            label: column.label
          });
        }
      });
      this.$parent.filterColumns.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));
      this.$nextTick(() => {
        this.$parent.$refs[this.filterColumns.tableName].doLayout();
      });
    },
    /** 表格列显示项选中变化 */
    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));
      this.$nextTick(() => {
        this.$parent.$refs[this.filterColumns.tableName].doLayout();
      });
    },
  }
})
</script>