复杂table

数据

{
    "headers": [
        "1月",
        "2月",
        "3月",
        "4月",
        "5月",
        "6月",
        "7月",
        "8月",
        "9月",
        "10月",
        "11月",
        "12月",
        "合计"
    ],
    "rows": [
        {
            "name": "上海市",
            "values": [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                60,
                0,
                60,
                0,
                120
            ],
            "children": [
                {
                    "name": "市辖区",
                    "values": [
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        0,
                        60,
                        0,
                        60,
                        0,
                        120
                    ],
                    "children": []
                }
            ]
        },
        {
            "name": "合计",
            "values": [
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                0,
                60,
                0,
                60,
                0,
                120
            ],
            "children": []
        }
    ]
}

代码

<template>
    <div class="origin-page">
        <div class="kind-name">
            <router-view />
            <div class="name-text">产地进货量（吨）</div>
            <div class="sel-left">
                <el-select 
                    v-model="KindVal" 
                    clearable 
                    filterable  
                    class="sel-area" 
                    placeholder="请选择摊位区"
                    @change="selKindsDFun"
                >
                    <el-option
                    v-for="item in stallAreaOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <TimeSelect  @transTime="TimeChangeFun" />
                
            </div>
        </div>
        <el-table :data="tableData" border class="OuterTable"  v-loading="tableLoading">

            <el-table-column label="" type="expand" fixed>
                <template slot-scope="props">
                    <el-table class="secTable"  :data="props.row.children">
                        <el-table-column  prop="censusNameText" ></el-table-column>
                        <el-table-column v-for="(item,index) in TimeList" :key="item" >
                            <template slot-scope="scope">
                                <span>{{scope.row.childArrayList[index].itemTimeCountVal}}</span>
                            </template> 
                        </el-table-column>                        
                    </el-table> 
                </template>      
            </el-table-column>


            <el-table-column label="城市" prop="censusNameText" ></el-table-column>           
            <el-table-column v-for="(item,index) in TimeList" :key="item" :label="item">
                <template slot-scope="scope">
                    <span>{{scope.row.childArrayList[index].itemTimeCountVal}}</span>
                </template> 
            </el-table-column>


        </el-table>
    </div>
</template>

<script>
import stall from '@/api/stall'
import statisticsReport from '@/api/report-statistics'
import TimeSelect from '../../components/TimeSelect.vue'
import dayjs from 'dayjs'
export default {
    components: {
        TimeSelect
    },
    data(){
        return{
            tableLoading: false,
            TimeList:[],
            tableData:[],
            stallAreaOptions: [],
            KindVal: '',
            yearVal: dayjs().format('YYYY'),
            monthVal:'',
        }
    },
    mounted() {
        this.LoadArea()
        this.initFun()
    },
    methods: {
        selKindsDFun(){
            console.log(this.KindVal)
            this.initFun()
        },
        TimeChangeFun(yearVal,monthVal){
            this.yearVal = yearVal;
            this.monthVal = monthVal;
            this.initFun()

        },
        initFun() {
            
            let postdata={
                year: this.yearVal,
                month: this.monthVal,
                stallAreaId:this.KindVal
            }
            this.tableLoading= true;
            statisticsReport.byPlaceOrigin(postdata)
            .then(res => {
                let resdata = res.data;
                this.TimeList = resdata.headers;
                let provincesFloor = resdata.rows.map((item) => {
                let oneFloor={}
                if(item.children){
                     oneFloor = item.children.map((alone,index) => {                       
                        let oneArray=  alone.values.map((item,secondIndex)=>{
                            return{
                                monthOrDayVal: secondIndex,
                                itemTimeCountVal: item,
                            }
                        })
                        return {
                            childArrayList: oneArray,
                            censusNameText: alone.name,
                        };
                    });
                }
                let cityFloor = item.values.map((each,index) => {
                    return {
                        monthOrDayVal: index,
                        itemTimeCountVal: each,
                    };
                });
                return {
                    censusNameText: item.name,
                    children:oneFloor,
                    childArrayList: cityFloor,
                };
            });
            this.tableData = provincesFloor;
            console.log(provincesFloor)
          }).finally(() => {
            this.tableLoading= false;
          })
        },

        LoadArea(){
            stall.listAreas().then(response => {
                this.stallAreaOptions = response.data.list
            })
        },
  },

}
</script>

<style>
@import "../../components/statistics.css";



.origin-page table tbody tr:nth-last-child(1) .el-table__expand-icon{
    display: none!important;
}
.secTable {
    position: flex!important;
    padding-left: 44px!important;
    /* border: 1px solid #EBEEF5!important; */
    background: white;
}
.secTable table{
    width: auto!important;
}
.secTable thead{
    display: none!important;
}
.secTable tr {
    background: #F5F7FA;
}

.OuterTable tbody td:nth-child(1) {
    padding: 0px;
}





.sel-area{
    margin-right: 20px;
}
.sel-left{
    display: flex;
    align-items: center;
}

</style>