在網(wǎng)上找了很多 沒有看到實(shí)用的方法
研究出來以后決定寫一個(gè)教程 方便大家和自己以后開發(fā)

首先下面是示例圖

示例圖.png

然后貼html代碼

html.png

<!-- 多選 -->
            <div class="fl">
                <checkbox-group v-model="cheackList" @on-change="cheackChange">
                    <checkbox label="在線總?cè)藬?shù)"></checkbox>
                    <checkbox label="在線注冊(cè)人數(shù)"></checkbox>
                    <checkbox label="在線游客"></checkbox>
                </checkbox-group>
            </div>
 <!-- 數(shù)據(jù)表展示 -->
            <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數(shù)據(jù)

data數(shù)據(jù).png

Js代碼 -data數(shù)據(jù)

 cheackList: ['在線總?cè)藬?shù)', '在線注冊(cè)人數(shù)', '在線游客'],//多選框參數(shù)
                userNumberSet: [ //表格設(shè)置  
                    {
                        title: '時(shí)間',
                        key: 'Date',
                        sortable: true
                    },
                    {
                        title: '在線總?cè)藬?shù)',
                        key: 'Total',
                    },
                    {
                        title: '在線注冊(cè)人數(shù)',
                        key: 'Users',
                        sortable: true
                    },
                    {
                        title: '在線游客',
                        key: 'Visitors'
                    }
                ],
                userNumberList: [],//表格列表數(shù)據(jù),
                userNumberObj: {//多選框控制表格設(shè)置
                    '在線總?cè)藬?shù)': {
                        title: '在線總?cè)藬?shù)',
                        key: 'Total',
                        sortable: true
                    }, '在線注冊(cè)人數(shù)': {
                        title: '在線注冊(cè)人數(shù)',
                        key: 'Users',
                    }, '在線游客': {
                        title: '在線游客',
                        key: 'Visitors'
                    }
                },

Js代碼(圖) -methods數(shù)據(jù)

methods數(shù)據(jù).png

Js代碼 -methods數(shù)據(jù)

//根據(jù)多選框 展示對(duì)應(yīng)的表格數(shù)據(jù)
            cheackChange: function (type) {
                //每次多選框點(diǎn)擊觸發(fā)事件 初始化table表格設(shè)置的數(shù)組
                //我這里是固定有一個(gè)欄目的 時(shí)間 所以默認(rèn)寫在上面 沒有可以就[]
                this.userNumberSet = [ 
                    {
                        title: '時(shí)間',
                        key: 'Date',
                        sortable: true
                    }

                ],
                //用map方法獲取到被選中的所有item參數(shù) 
                type.map((item, index) => {
                    console.log(item, index);
                    console.log(item, index);
                    //并且根據(jù)參數(shù)拿到userNumberObj先前列好的格式 把被選中的參數(shù)push進(jìn)去
                    this.userNumberSet.push(this.userNumberObj[item])
                })
                console.log(this.userNumberSet);
            },

ok 完工啦