JeecgBoot前端列表自定义列显示

JeecgBoot前端列表自定义列显示

一、显示效果有两种：

1. 就是官方文档中所讲的：没有显示固定字段。需要进入列表后，点击设置勾选对应字段并显示或者隐藏。下次进入此页面，还是显示上次勾选的对应字段。可以参考Jeecg官方文档

2. 在第一种方式上修改，将经常用的列表字段固定显示，其他字段可以选择是显示或隐藏。(本文讲述此方法)

二、字段部分

data () {
      return {
        beforeOneChangeColumns:[],
        //列设置
        settingColumns:[],
        //列定义
        defColumns: [],
        //列表后的操作栏(例如：编辑/详情等)
        columnsAction: [],
        //列表固定显示字段
        columns: [],
        //列表固定显示字段(同columns)
        columnsDefault: [],
      }
    },

思路和原理 ： (自己的操作理解，如有不对，谢谢指教)
获取并判断colSettings是否为空(是否有勾选的自定义列显示)；如果没有，就显示固定字段columns数组内容；反之，获取需要显示的自定义列字段，循环添加进columns数组中；之后将columnsAction数组循环添加进columns数组中。

三、页面样式(在template标签中添加设置按钮；两种方式，只用一种即可)

1.第一种：列表外增加设置按钮

<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 }}</a-checkbox></a-col>
             </template>
          </template>
       </a-row>
     </a-checkbox-group>
   </template>
   <a><a-icon type="setting" />自定义列</a>
</a-popover>

2.第二种：在表头列中扩展按钮

columns表头字段部分

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

插槽部分(写在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' }" />

四、页面方法

1.created中调用：一进页面就加载

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

2.methods列更改事件

onColSettingsChange可以自定义 ，需要设置按钮中的@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 = [];
        for(var i = 0; i< (this.columnsDefault).length;i++){
          this.columns.push(((this.columnsDefault)[i]))
        }
        for(var i = 0; i< cols.length;i++){
          this.columns.push(cols[i])
        }
        for(var i = 0; i< (this.columnsAction).length;i++){
          this.columns.push(((this.columnsAction)[i]))
        }
      },

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

initColumns(){
        //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
        //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');
        var key = this.$route.name+":colsettings";
        let colSettings= Vue.ls.get(key);
        if(colSettings==null||colSettings==undefined){
          this.columns = this.columns;
        }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;
          })
          if(this.beforeOneChangeColumns != null || this.beforeOneChangeColumns.length > 0){
            for(var i = 0; i< (this.beforeOneChangeColumns).length; i++){
              this.columns.splice((this.beforeOneChangeColumns)[i]);
            }
          }
          this.beforeOneChangeColumns = cols;
          for(var i = 0; i < cols.length;i++){
            this.columns.push(cols[i]);
          }
          for(var i = 0; i < (this.columnsAction).length;i++){
            this.columns.push((this.columnsAction)[i]);
          }
        }
      }

一个在学习的开发者，勿喷，欢迎交流