iview Table根据权限显示对应列

在网上找了很多 没有看到实用的方法
研究出来以后决定写一个教程 方便大家和自己以后开发

首先下面是示例图

示例图.png

然后贴html代码

html.png

<!-- 多选 -->
            <div class="fl">
                <checkbox-group v-model="cheackList" @on-change="cheackChange">
                    <checkbox label="在线总人数"></checkbox>
                    <checkbox label="在线注册人数"></checkbox>
                    <checkbox label="在线游客"></checkbox>
                </checkbox-group>
            </div>
 <!-- 数据表展示 -->
            <div class="exhibition-table" v-if="userExhibition">
                <i-table  :columns="userNumberSet" :data="userNumberList"></i-table>
                <!-- 分页 -->
                <div class="journalism-page">
                    <page :total="tabPage.Total" show-elevator :current="tabPage.Page" :page-size="tabPage.PageSize"
                        @on-change="changePage" />
                </div>
            </div>

Js代码(图) -data数据

data数据.png

Js代码 -data数据

 cheackList: ['在线总人数', '在线注册人数', '在线游客'],//多选框参数
                userNumberSet: [ //表格设置  
                    {
                        title: '时间',
                        key: 'Date',
                        sortable: true
                    },
                    {
                        title: '在线总人数',
                        key: 'Total',
                    },
                    {
                        title: '在线注册人数',
                        key: 'Users',
                        sortable: true
                    },
                    {
                        title: '在线游客',
                        key: 'Visitors'
                    }
                ],
                userNumberList: [],//表格列表数据,
                userNumberObj: {//多选框控制表格设置
                    '在线总人数': {
                        title: '在线总人数',
                        key: 'Total',
                        sortable: true
                    }, '在线注册人数': {
                        title: '在线注册人数',
                        key: 'Users',
                    }, '在线游客': {
                        title: '在线游客',
                        key: 'Visitors'
                    }
                },

Js代码(图) -methods数据

methods数据.png

Js代码 -methods数据

//根据多选框 展示对应的表格数据
            cheackChange: function (type) {
                //每次多选框点击触发事件 初始化table表格设置的数组
                //我这里是固定有一个栏目的 时间 所以默认写在上面 没有可以就[]
                this.userNumberSet = [ 
                    {
                        title: '时间',
                        key: 'Date',
                        sortable: true
                    }

                ],
                //用map方法获取到被选中的所有item参数 
                type.map((item, index) => {
                    console.log(item, index);
                    console.log(item, index);
                    //并且根据参数拿到userNumberObj先前列好的格式 把被选中的参数push进去
                    this.userNumberSet.push(this.userNumberObj[item])
                })
                console.log(this.userNumberSet);
            },

ok 完工啦