表格自定义列

表格自定义列

图片功能展示：

代码展示

<a style="padding-right: 10px" @click="searchReset"><a-icon type="reload" style="margin-right: 5px"/>刷新</a>
<!--自定义列-->
<a-popover title="自定义列" trigger="click" placement="bottomRight">
  <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'">
            <!-- :v-has="'testdemo:{{item.dataIndex}}'" ：系统设置权限标识-->
            <a-col :span="12" :v-has="'testdemo:{{item.dataIndex}}'" ><a-checkbox :value="item.dataIndex" >{{ item.title }}</a-checkbox></a-col>
          </template>
        </template>
      </a-row>
    </a-checkbox-group>
  </template>
  <a><a-icon type="setting" />自定义列</a>
</a-popover>

 import Vue from 'vue'
 import { colAuthFilter } from "@/utils/authFilter"
 
/*columns：列表展示的列，初始为空。
settingColumns：保存勾选的列设置
defColumns：定义列表可以展示的列信息*/
//表头
columns: [],
//列设置
settingColumns:[],
//列定义
defColumns:[
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 60,
    align: 'center',
    customRender: function(t, r, index) {
      return parseInt(index) + 1
    }
  },
  {
    title: '设备类型',
    align: 'center',
    width: 80,
    dataIndex: 'typeName'
  },

  {
    title: '设备型号',
    align: 'center',
    width: 80,
    dataIndex: 'modelName'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: 100
  }
],

 	//列设置更改事件
    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(){
     //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
     //'testdemo':系统设置授权标识
     // 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() {
    this.initColumns()
    this.disableMixinCreated=true;
    this.columns = colAuthFilter(this.columns,'testdemo:');
    this.loadData();
    this.initDictConfig();
  }
}