左侧标签，右侧根据左侧切换不同的内容，对返回的数据做处理

 页面代码如下：

<el-tabs tab-position="left" v-model="activeName" @tab-click="ones">
                    <el-tab-pane :label="item.key" v-for="(item, index) in tableData1" :key="index" :name="item.index">
                        <h2 style="text-align: center">{
   
   { item.key }}</h2>
                        <el-table :data="item.children" border style="width: 100%" max-height="300"
                            :header-cell-style="{ background: '#F5F7FA' }">
                            <el-table-column prop="subjectCode" label="科目编码" width="180" align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="subjectName" label="科目名称" align="center" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="subjectMoney" sortable label="本期发生金额" align="center"
                                show-overflow-tooltip>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                </el-tabs>

后台返回的数据处理

 Object.keys(res.data).forEach(key => {

                        this.tableData1.push({
                            key,
                            children: res.data[key]
                        })
                        // 去重
                        // if (!res.data[key].length) {
                        //     delete res.data[key]
                        // } else {
                        //     this.newData.push({
                        //         key,
                        //         children: res.data[key]
                        //     })
                        // }

                        // console.log(111, this.tableData1);
                    })