功能说明：

页面自定义设置列表需要选择的列，设置组件集成的两种方法，一个是在列表外增加设置组件，一个是在列表表头增加设置组件
具体代码案例参照【常用示例-单表模型示例】功能

功能预览：

在这里插入图片描述

实现方法：

一. 增加初始化配置

data() 方法中配置

//表头
columns:[],
//列设置
settingColumns:[],
//列定义
defColumns: [{

        title: '#',
        dataIndex: '',
        key: 'rowIndex',
        width: 60,
        align: "center",
        customRender: function (t, r, index) {
          return parseInt(index) + 1;
        }
      },
      {
        title: '姓名',
        align: "center",
        dataIndex: 'name'
      },
      .......
      .......
  ]

说明：
columns：列表展示的列，初始为空。
settingColumns：保存勾选的列设置
defColumns：定义列表可以展示的列信息

增加设置按钮，两种实现方式任选其一即可
(一)第一种在列表外增加设置按钮

      <a @click="loadData()"><a-icon type="sync" />刷新</a>
      <a-divider type="vertical" />
      <a-popover title="自定义列" trigger="click" placement="leftBottom">
        <template slot="content">
          <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
            <a-row>
              <template v-for="(item,index) in defColumns">
                <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <a-col :span="12"><a-checkbox :value="item.dataIndex">{

{ item.title }}

                </template>
              </template>
            </a-row>
          </a-checkbox-group>
        </template>
        <a><a-icon type="setting" />设置</a>
      </a-popover>
    </span>

（二）

{
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {
              filterDropdown: 'filterDropdown',
              filterIcon: 'filterIcon',
              customRender: 'action'},
          }

< a-table > </ a-table > 中增加插槽代码

<div slot="filterDropdown">
          <a-card>
            <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
              <a-row>
                <template v-for="(item,index) in defColumns">
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <a-col :span="12"><a-checkbox :value="item.dataIndex">{
   { item.title }}</a-checkbox></a-col>
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </a-card>
        </div>
        <a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color:  '#108ee9' }" />
在这里插入代码片

实现checkbox @change

//列设置更改事件

  onColSettingsChange (checkedValues) {
    var key = this.$route.name+":colsettings";
    Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
    this.settingColumns = checkedValues;
    const cols = this.defColumns.filter(item => {
      if(item.key =='rowIndex'|| item.dataIndex=='action'){
        return true
      }
      if (this.settingColumns.includes(item.dataIndex)) {
        return true
      }
      return false
    })
    this.columns =  cols;
  },

页面加载时实现列的初始化方法

initColumns(){

    //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
    //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
    var key = this.$route.name+":colsettings";
    let colSettings= Vue.ls.get(key);
    if(colSettings==null||colSettings==undefined){
      let allSettingColumns = [];
      this.defColumns.forEach(function (item,i,array ) {
        allSettingColumns.push(item.dataIndex);
      })
      this.settingColumns = allSettingColumns;
      this.columns = this.defColumns;
    }else{
      this.settingColumns = colSettings;
      const cols = this.defColumns.filter(item => {
        if(item.key =='rowIndex'|| item.dataIndex=='action'){
          return true;
        }
        if (colSettings.includes(item.dataIndex)) {
          return true;
        }
        return false;
      })
      this.columns =  cols;
    }
  }

created中调用：

created() {
```
  this.initColumns();
},
```

注意事项：

引入注意事项

需要引入vue

import Vue from ‘vue’

增加设时按钮的第一种方式

      <a @click="loadData()"><a-icon type="sync" />刷新</a>
      <a-divider type="vertical" />
      <a-popover title="自定义列" trigger="click" placement="leftBottom">
        <template slot="content">
          <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
            <a-row>
              <template v-for="(item,index) in defColumns">
                <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <a-col :span="12"><a-checkbox :value="item.dataIndex">{

{ item.title }}

                </template>
              </template>
            </a-row>
          </a-checkbox-group>
        </template>
        <a><a-icon type="setting" />设置</a>
      </a-popover>
    </span>

在这里插入图片描述

增加设时按钮的第二种方式

{

        title: '操作',
        dataIndex: 'action',
        align: "center",
        scopedSlots: {
          filterDropdown: 'filterDropdown',
          filterIcon: 'filterIcon',
          customRender: 'action'},
      }