背景

在crm系統(tǒng)中囊颅，有時form表單字段非常多当悔，而實際需要查詢的條件只有幾個傅瞻，一是占用空間多分飞，二是從非常多的字段中不太好尋找嗽桩，所以，需要做一個字段篩選模版婆廊，只選擇有效的字段展示饼疙。效果如圖：

image.png

在此溺森，給其封裝成一個組件。

如何使用

1窑眯、引入組件

import FilterColumns from "@/components/filterColumns/index

2儿惫、注冊組件

  components: {
    FilterColumns
  },

3、調用組件

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

4伸但、初始化數(shù)據(jù)

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>

組件具體實現(xiàn)

<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>