Jeecgboot table自定义列

效果图

思路：
1、将勾选的复选框的dataIndex存到本地（eg:[“name”,“keyWord”]），并设置有效期，过期则显示所有列
2、根据勾选的复选框的，过滤数据，重新改变table列的数组（columns）的值

一、自定义列

<!---->
     <a-popover title="自定义列" trigger="click" placement="leftBottom">
       <template slot="content">
         <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns"> 
         <!--  onColSettingsChange 复选框选中状态发生变化时，回调函数 		defaultChecked初始是否选中--
           <a-row style="width: 400px"> >
             <template v-for="(item,index) in defColumns"> <!--defColumns 列定义-->
               <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                   <a-col :span="12"><a-checkbox :value="item.dataIndex"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></a-checkbox></a-col>
               </template>
             </template>
           </a-row>
         </a-checkbox-group>
       </template>
       <a><a-icon type="setting" />设置</a>
     </a-popover>

二、table表格

<!---->
     <a-table
       ref="table"
       size="middle"
       bordered
       rowKey="id"
       :columns="columns"
       :dataSource="dataSource"
       :pagination="ipagination"
       :loading="loading"
       :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
       @change="handleTableChange">

       <div slot="filterDropdown">
         <a-card>
           <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
             <a-row style="width: 400px">
               <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"><j-ellipsis :value="item.title" :length="10"></j-ellipsis></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' }" />

       <span slot="action" slot-scope="text, record">
         <a @click="handleEdit(record)">编辑</a>

         <a-divider type="vertical"/>
         <a-dropdown>
           <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
           <a-menu slot="overlay">
             <a-menu-item>
               <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                 <a>删除</a>
               </a-popconfirm>
             </a-menu-item>
           </a-menu>
         </a-dropdown>
       </span>

     </a-table>

三、data数据

	data(){
		return{
	      //列定义
	       //表头
	       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'
	          },
	          {
	            title: '关键词',
	            align: "center",
	            dataIndex: 'keyWord'
	          },
	          {
	            title: '打卡时间',
	            align: "center",
	            dataIndex: 'punchTime'
	          },
	          {
	            title: '性别',
	            align: "center",
	            dataIndex: 'sex',
	            customRender: (text) => {
	              //字典值替换通用方法
	              return filterDictTextByCache('sex', text);
	            }
	          },
	          {
	            title: '年龄',
	            align: "center",
	            dataIndex: 'age'
	          },
	          {
	            title: '生日',
	            align: "center",
	            dataIndex: 'birthday'
	          },
	          {
	            title: '邮箱',
	            align: "center",
	            dataIndex: 'email'
	          },
	          {
	            title: '个人简介',
	            align: "center",
	            dataIndex: 'content'
	          },
	          {
	            title: '操作',
	            dataIndex: 'action',
	            align: "center",
	            scopedSlots: {
	              filterDropdown: 'filterDropdown',
	              filterIcon: 'filterIcon',
	              customRender: 'action'},
	          }],
		}
	}

四、调用方法 onColSettingsChange

    //列设置更改事件
    onColSettingsChange (checkedValues) {
      console.log(this.defColumns)		
      console.log(checkedValues)		//复选框勾选的dataIndex ['name']
      var key = this.$route.name+":colsettings";	
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)	//存储：设置有效时间7天
      this.settingColumns = checkedValues;						//v-model 绑定的勾选值（自定义列复选框是否勾选）
      const cols = this.defColumns.filter(item => {				//过滤（决定table列的显示 隐藏）
        if(item.key =='rowIndex'|| item.dataIndex=='action'){
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) { 
          return true
        }
        return false
      })
      this.columns =  cols;			//重新给this.columns赋值
    },