全选-复选框-控制表格的列的显示和隐藏

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

背景

在做一些后台数据统计功能时,需要做一些展示层面上的过滤,结合复选框,显示和隐藏某一列或某一行

实例效果如下所示

具体实例效果可点文末左下方阅读原文~

实例代码如下所示

<template>
    <div>

             <div class="el-checkbox-wrap">
                <div class="select-all">
                    <el-checkbox
                    :indeterminate="isIndeterminate"
                    v-model="formParams.checkAll"
                    @change="handleCheckAllChange"
                    >全选
                    </el-checkbox>
                </div>
                <div>
                    <el-checkbox-group
                    v-model="formParams.checkeddotNames"
                    @change="handleCheckeddotNamesChange"
                    >
                    <el-checkbox
                        v-for="item in checkOptionsData"
                        :label="item.code"
                        :key="item.code"
                    >
                        {
   { item.name }}
                    </el-checkbox>
                    </el-checkbox-group>
                </div>
            </div>
             <!-- 表格部分开始 -->
            <div class="table-content">
            <el-table
                :data="tableData"
                resizable
                height="100%"
                ref="table"
                border
                style="width: 100%"
            >
                <el-table-column
                fixed
                align="center"
                label="日期"
                v-if="formParams.checkeddotNames.length"
                :showOverflowTooltip="true"
                >
                <template slot-scope="scope">
                    <p>
                    {
   { scope.row.date }}
                    </p>
                </template>
                </el-table-column>

                <template v-for="(item, index) in dot_info">
                <el-table-column
                    v-if="formParams.checkeddotNames.includes(item.code)"
                    align="center"
                    :label="item.name"
                    :key="index + Math.random()"
                    :showOverflowTooltip="true"
                >
                    <el-table-column
                    align="center"
                    label="pv"
                    width="auto"
                    :showOverflowTooltip="true"
                    >
                    <template slot-scope="scope">
                        <p>
                        {
   { scope.row[item.code] && scope.row[item.code].pv }}
                        </p>
                    </template>
                    </el-table-column>
                    <el-table-column
                    align="center"
                    label="uv"
                    width="auto"
                    :showOverflowTooltip="true"
                    >
                    <template slot-scope="scope">
                        <p>
                        {
   { scope.row[item.code] && scope.row[item.code].uv }}
                        </p>
                    </template>
                    </el-table-column>
                    <el-table-column align="center" label="refer" width="auto">
                    <template slot-scope="scope">
                        <p>
                        <el-button
                            size="mini"
                            type="primary"
                            @click="handleLook(scope.row[item.code].refers, scope.$index)"
                            >查看
                        </el-button>
                        </p>
                    </template>
                    </el-table-co