vue2.0+elementUI构建复杂表头的表格（点击表头收缩列）

css部分

.el-icon-plus{
                cursor: pointer;
            }
            body,html{
                width: 100%;
                height: 100%;
            }
            *{
                padding: 0;
                margin: 0;
            }
            .title{
                background: #b3c0d1;
                color: #fff;
                padding: 10px;
                height: 40px;
            }
            .aling{
                text-align: center;
                border-bottom: 1px solid #fff;
            }
            .container{
                width: 100%;
                height:calc(100% - 40px);
                overflow: hidden;
            }
            .list{
                width: 100%;
                height: auto;
                border-right: 1px solid #fff;
                box-sizing: border-box;
                overflow-y: auto;
            }
            .list:last-child{
                border: none;
                
            }
            .check{
                padding: 10px;
            }
            .el-checkbox:nth-child(2n-1){
                margin: 0;
            }
            /*平台*/
            .platform{
                height:calc(100% - 500px);
            }
            /*品牌*/
            .brand{
                height: 160px;
            }
            /*类目*/
            .category{
                height: 340px;
            }
            /*表格背景色--月*/
            .backMount{
                background: #909399;
                color: #fff;
                font-weight: 900;
            }
            .el-table__body-wrapper .el-table__body .hover-row td{
                
                color: #222;
            }
            /*表格行点击标记*/
            #main .el-table__body-wrapper .el-table__body .current-row td,.el-table__fixed-body-wrapper .el-table__body .current-row td{
                background: oldlace;
                color: #222;
            }
            /*表格行划过标记*/
            #main .el-table__body-wrapper .el-table__body .hover-row td,#main .el-table__fixed-body-wrapper .el-table__body .hover-row td{
                background: oldlace;
                color: #222;
            }
            /*表格文字颜色*/
            .el-table__body .bgColor{
                color: #000;
            }
            /*表格底部合计背景色**表格右侧固定栏背景色*/
            .el-table__fixed-footer-wrapper tbody .is-leaf,.el-table__footer-wrapper tbody td, .el-table__header-wrapper tbody td,.fixedColor{
                background: oldlace;
                color: #222;
                font-weight: 900;
            }
            
            /*设置滚动条样式*/
            .el-table__body-wrapper::-webkit-scrollbar{
                width:10px;
                height:10px;
            }
            .el-table__body-wrapper::-webkit-scrollbar-thumb{
                border-radius: 5px;
                -webkit-box-shadow: inset 0 0 4px rgba(255,255,255,0.2);
                background: rgba(10, 10, 10,0.4);
            }
            .el-table__body-wrapper::-webkit-scrollbar-button{
               
            }
            .el-table__body-wrapper::-webkit-scrollbar-track{
                -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
                border-radius: 0;
                background: rgba(0,0,0,0.5);
            }
            .el-table__fixed-right,.el-table__fixed{
                height: 100% !important;
            }

HTML部分

<el-container id="app" style="height: 100%;">
            <el-aside :class="animateAside" style="width: 200px;background: #ecf8ff;" id="aside">
                
                <div class="container">
                    <div class="list platform">
                        <el-row class="title">选择平台</el-row>
                        <div class="check">
                            <el-checkbox-group v-model="platform">
                                <el-checkbox label="京东"></el-checkbox>
                                <el-checkbox label="淘宝"></el-checkbox>
                                <el-checkbox label="天猫"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <div class="list brand">
                        <el-row class="title">选择品牌</el-row>
                        <div class="check">
                            <el-checkbox-group v-model="brand">
                                <el-checkbox label="北极绒"></el-checkbox>
                                <el-checkbox label="莫代尔"></el-checkbox>
                                <el-checkbox label="黄金甲"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        
                    </div>
                    <div class="list category">
                        <el-row class="title">选择类目</el-row>
                        <div class="check">
                            <el-checkbox-group v-model="category">
                                <el-checkbox label="内衣"></el-checkbox>
                                <el-checkbox label="外套"></el-checkbox>
                                <el-checkbox label="寸衫"></el-checkbox>
                            </el-checkbox-group>
                        </div>
                        
                    </div>
                </div>
            </el-aside>
            <el-main style="padding: 0;">
                <el-container style="height: 100%;">
                    <el-header style="background: #b3c0d1;overflow: hidden;height: 40px;line-height: 40px;">
                        
                        
                        
                        <div style="width: 5%;height: 100%;float: left;min-width: 60px;"><i class="el-icon-plus" v-on:click="shrink"></i></div>
                        <div style="width: 70%;height: 100%;float: left;">
                            <el-slider v-model="slider" type="warning" :step="step" range :max="max" :min="min" @change="sliderChange" :format-tooltip="formatTooltip"></el-slider>
                        </div>
                        <div style="width: 25%;height: 100%;float: left;line-height: 40px;padding-left: 40px;box-sizing: border-box;">
                            <el-date-picker
                                
                                style="width: 100%;"
                                format="yyyy年MM月dd日"
                                size="mini"
                                :editable="false"
                                v-model="dateValue"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                @change="dataChange"
                                end-placeholder="结束日期">
                            </el-date-picker>
                        </div>
                        
                    </el-header>
                    <el-main style="padding: 0;overflow: hidden;display: -webkit-box;width: 100%;">
                        <el-row style="width:100%;display:flex;flex-flow: column;flex: 1;" id="main">
                            <el-table 
                                v-loading="loading" 
                                element-loading-background="rgba(255,255,255,0.6)"
                                show-summary 
                                ref="singleTable" 
                                :fit="true" 
                                :height="height" 
                                :data="tableData" 
                                :row-class-name="tableRowClassName"
                                @header-click="MonthClick" 
                                :cell-class-name="cellClss" 
                                :header-cell-style="headerCcell">
                                <el-table-column prop="Store_Name" label="店铺" fixed="left" min-width="200"></el-table-column> 
                                <el-table-column :prop="item.label" :label="item.years" align="center" v-for="item in colmun" align="center">
                                    <template v-for="item1 in item.list" >
                                        <el-table-column v-if="!item1.close"  :prop="item1.label"  :label="'+ '+item1.Mouth" width="80" align="center"></el-table-column>
                                        <el-table-column v-if="item1.close"  :prop="item1.label"  :label="'- '+item1.Mouth" width="80" align="center"></el-table-column>
                                        <template v-if="item1.close">
                                            <el-table-column :prop="item2.label" width="80" v-for="item2 in item1.list" :label="item2.day" align="center"></el-table-column>
                                        </template>
                                        
                                    </template>
                                    
                                </el-table-column>
                                <el-table-column prop="TotalAmount" fixed="right" label="合计" width="100">
                                </el-table-column>
                            </el-table>
                        </el-row>
                        
                    </el-main>
                    
                </el-container>
            </el-main>
            
        </el-container>

js部分

new Vue({
            el: '#app',
            data: function() {
                return {
                    animateAside:"showAside",
                    dateValue:"",
                    loading:true,
                    platform:[],//平台数据
                    height:914,//表格高度
                    category:[],//类目数据
                    brand:[],//品牌数据
                    step:100,//滑块步长
                    colmun:"",//表头
                    min:0,//滑块最小值 即初始时间
                    max:1,//滑块最大值 即结束时间(当前时间)
                    slider:[1,50000],//当前滑块值
                    tableData:[]//表格数据
                }
            },
            methods:{
                //收缩侧边栏
                shrink(){
                    var than = this ;
                    //this.dialogVisible = true;
                    if($("#aside").hasClass("showAside")){
                        $("#aside").animate({width:0},500)
                    }else{
                        $("#aside").animate({width:200},500)
                    }
                    $("#aside").toggleClass("showAside");
                },
                //日期change时间
                dataChange(){
                    this.slider = [parseInt(this.dateValue[0].getTime()/1000),parseInt(this.dateValue[1].getTime()/1000)];
                    //模拟请求表格数据----这里这是模拟 便不是真实的数据 参数 时间截数组
                    this.gridData(this.dateValue);
                },
                //表头年  ---style样式
                headerCcell(row){
                    if(row.column.property.indexOf("Year")>-1&&row.column.property.indexOf("Mouth")==-1){
                        return "border-top:2px solid #909399;color:#666;"
                    }
                    if(row.column.property.indexOf("Mouth")>-1&&row.column.property.indexOf("day")==-1){
                        return "background:#909399;color:#fff;cursor: pointer;"
                    }
                    if(row.column.property.indexOf("day")>-1){
                        return "font-weight: 400;font-size: 12px;line-height:10px"
                    }
                    
                },
                //表格行背景class
                tableRowClassName(){
                    return "bgColor"
                },
                //单元格的 className 的回调方法
                cellClss(row){
                    if(row.column.property.indexOf("Mouth")>-1&&row.column.property.indexOf("day")==-1){
                        return "backMount"
                    }
                    if(row.column.property=="TotalAmount"){
                        return "fixedColor"
                    }
                },
                //点击表头的方法
                MonthClick(column, event){
                    console.log(column)
                    if(column.property.indexOf("Mouth")>-1&&column.property.indexOf("day")==-1){
                        
                        
                        this.loading = true;
                        setTimeout(()=>{
                            var index = parseInt(column.property.split("Mouth")[1])-1;
                            var _index = parseInt(column.property.split("Mouth")[0].split("Year")[1])-parseInt(this.colmun[0].years);
                            this.colmun[_index].list[index].close = !this.colmun[_index].list[index].close;
                        },100)
                        
                        setTimeout(()=>{
                            
                            this.loading = false;
                        },1000)
                        
                    }
                },
                //请求后台数据的方法
                gridData(data){
                    var than = this;
                    //模拟请求表格数据----这里这是模拟 便不是真实的数据
                    $.ajax({
                        type:"get",
                        url:"./data1.json",
                        async:true,
                        data:data,
                        timeout: 5000,
                        beforeSend: function () {
                            
                        },
                        success:function(res){
                            console.log(res)
                            than.colmun = res.columns;
                            than.tableData = res.rows;
                            than.loading = false;
                            
                            than._watcher.update();
                        },
                        error:function(res){
                            console.log(res)
                        }
                    });
                },
                //实例化滑块显示方式
                TooltipSlider(){
                    this.step = 24*60*60;
                    var startTime = new Date(2017,03,04);//2017/04/04 365+26+31+15
                    var time = new Date();//2017/04/04
                    var Year = time.getFullYear();
                    var Month = time.getMonth();
                    var day =time.getDate();
                    var startEnd = new Date(Year,Month,day);
                    var startMin = parseInt(startTime.getTime()/1000);
                    var startMax = parseInt(startEnd.getTime()/1000);
                    this.min = startMin;
                    this.max = startMax;
                    //当前显示多月所有数据
                    this.slider = [parseInt(new Date(Year,0,1).getTime()/1000),startMax];//2018-01-01 -今天
                    this.dateValue = [new Date(this.slider[0]*1000),new Date(this.slider[1]*1000)];
                },
                //滑块返回显示的方法
                formatTooltip(value){
                    return this.format(value);
                },
                //滑块改变的回调
                sliderChange(){
                    var startTime = this.format(this.slider[0]);
                    var startEnd = this.format(this.slider[1]);
                    this.dateValue = [new Date(this.slider[0]*1000),new Date(this.slider[1]*1000)];
                    //模拟请求表格数据----这里这是模拟 便不是真实的数据 参数 时间截数组
                    this.gridData(this.dateValue);
                },
                //格式化滑块显示
                format(value){
                    function fn(n){
                        return n>=10?n:"0"+n;
                    }
                    var time =new Date(value*1000);
                    var Year = time.getFullYear();
                    var Month = time.getMonth()+1;
                    var day =time.getDate();
                    return Year+"/"+fn(Month)+"/"+fn(day);
                    
                },
                //请求后台数据的方法
                onLoad(){
                    var than = this;
                    //表格
                    $.ajax({
                        type:"get",
                        url:"./data.json",
                        async:false,
                        success:function(res){
                            console.log(res)
                            than.tableData = res.rows;
                            than.loading = false;
                            console.log(than.height )
                            than.colmun = res.columns;
                            than.height = document.getElementById("main").clientHeight;
                            than._watcher.update();
                        }
                    });
                    //平台
                    $.ajax({
                        type:"get",
                        url:"./data.json",
                        async:false,
                        success:function(res){
                            
                        }
                    });
                    //平台
                    $.ajax({
                        type:"get",
                        url:"./data.json",
                        async:false,
                        success:function(res){
                            
                        }
                    });
                    //平台
                }
            },
            mounted(){
                
                this.onLoad();
                this.TooltipSlider();
            }
        })

效果预览图

image.png