vue antd如何封装列筛选功能到一个button中？

Question

表单模板代码如下：

<template>
  <div>
    <div>
      <div style="position:relative;">
        <div style="float:left;margin-top: 10px;width:300px;">
          <div style="float:left;">
            <a-date-picker placeholder="选择日期" v-model='dateStr' :allowClear='false' :showToday='false'
                           :disabled-date="disabledDate" @change="onChange" style='width:100%;margin-bottom: 5px;'/>
          </div>
          <div style="position: absolute;left:280px;" v-if="isAdmin">
            <a-button type="primary" @click='emissionExportHandle'>
              数据导出
            </a-button>
          </div>

          <div style="position: absolute;left:380px;">
            <a-button type="primary" @click='checkChange'>
              筛选列
            </a-button>
          </div>

          <div style="position: absolute;left:200px;">
            <a-button type="primary" @click='refresh'>
              刷新
            </a-button>
          </div>
        </div>
        <div style="position: absolute;right:0px;">
          <a-col span="24">
            <a-form-item label="环保编号" :colon=false :labelCol="{lg: {span: 6}, sm: {span: 7}}"
                         :wrapperCol="{lg: {span: 17}, sm: {span: 17} }">
              <a-input :readOnly="true" v-model='protectionNumberr'/>
            </a-form-item>
          </a-col>
        </div>
      </div>

      <div class='emissionInfo' style="padding-top:50px;">
        <a-table :columns="filterColumn" bordered :data-source="data"
                 :pagination="paginationOpt" @change="onPageChangeFresh"
                 :loading='loadingTable' :rowKey="record => record.collectDateTime" :scroll="{ x: true}">
          
          <span slot="filterDropdown">
          <a-card>
            
            
            
            
            
            <a-checkbox-group :options="checkColumn" :defaultValue="checkColumn" @change="checkChange"/>
          </a-card>
        </span>
        </a-table>
      </div>
    </div>
  </div>
</template>

目前实现的效果如图所示：

最终要达成的效果，红色框的列筛选功能封装到筛选列这个button中，具体该如何实现？

其中列筛选的功能代码如下：

data() {
    return {
      isAdmin: false,
      vin: '', //公共使用的vin
      filterColumn: [],// 初始备份的表格列配置描述及过滤后的容器
      data: [],
      column: [],
      columns,
      columnsList: []
    }
  },
created() {
    // 实例创建完成将columns备份给filterColumns
    this.filterColumn = this.column;
},
computed: {
    // 用计算属性取出columns的dataIndex，作为多选框的选项数据
    checkColumn: function () {
      return this.column.map(item => item.title);
    }
  },
methods: {
    // 多选框的事件回调
    checkChange(checked) {
      // 初始是默认全选的，假设此刻点击了车速的选择框
      console.log(checked);
      const columns = this.column
      // 核心部分，数组过滤循环遍历columns，如果选择的值中包含dataIndex则为true并暴露出去，反之亦然
      const filterValue = columns.filter(item => {
        if (checked.includes(item.title)) {
          // 当暴露值为true时，循环遍历的值会赋给filterValue
          return true
        }
        return false
      });
      // 依旧是假设点击的是车速的选择框，暴露的值为[false,true,true,true],所以filterValue中的值没有包含车速的那一列
      // 然后将值赋给filterColumns
      this.filterColumn = filterValue
    },
}

Answer 1

你先给 筛选列选列 加个点击事件 。点击 弹窗一个框 选择 保留的列 。然后 根据这个 动态 修改 columns的值