jeecg-boot 列表自定义列实现

骑猪看日落 2022-12-19 03:50 234阅读 0赞

### 文章目录 ###

*  功能说明：
 *   *  功能预览：
 *  实现方法：
 *   *  一. 增加初始化配置
 *  注意事项：

# 功能说明： #

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

## 功能预览： ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 2]

# 实现方法： #

## 一. 增加初始化配置 ##

1.  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：定义列表可以展示的列信息

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

<span style="float:right;">
              <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 }}</a-checkbox></a-col>
                        </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' }" />

在这里插入代码片

1.  实现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;
          },

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

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;
            }
          }

1.  created中调用：

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

# 注意事项： #

> 引入注意事项

1.  需要引入vue

import Vue from 'vue'

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 3]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 5]

1.  [原文地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/636ffe4b0800461cb762e2ddd2f02abc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201105112749144.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201105112755567.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201105151512342.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201105151649885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201105151657218.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy,size_16,color_FFFFFF,t_70#pic_center
[Link 1]: https://www.bookstack.cn/read/jeecg-boot-2.0/1e0c497cc9d8c4c4.md