VUE+elementUI横向表格

最近有个需求需要表格横向，双向表头，然后形成矩阵
查了一些资料后，都模棱两可，汇总了一下，用以下方法实现

中间单元格需要做一个交叉取值，所以定义了一个方法，通过横向的id到纵向数据里面取到对应的值 翻页的话，可以通过监控表格的滚动条实现，但是不太好使，我就加了个按钮通过点击按钮获取下一页内容

html代码

<div class="doubleThTable">
    <el-table :data="tableData.data"
              style="width: 100%;"
              fit=true
              ref="table"
              height="100%"
              border>
        <el-table-column
                label="我方"
                align="right"
                fixed="left"
                width="150">
            <el-table-column

                    prop="otherName"
                    label="对方"
                    width="160"
                    align="left"
            >
                <template slot-scope="scope">
                    <a @click="detail(scope.row.stnId,'',scope.row.stnName)"
                       style="color:#ffffff;cursor:pointer;font-size: 14px;display: block;width: 100%;height: 100%">
                        {{scope.row.stnName}}
                    </a>
                </template>
            </el-table-column>

        </el-table-column>

        <el-table-column v-for="(col,i) in columnList"
                         :key="i"
                         :label="col.stnName"
                         align="center" width="100%"

        >
            <template slot-scope="scope">
                <a @click="detail(scope.row.stnId,col.stnId,scope.row.stnName)"
                   style="color:#ffffff;cursor:pointer;font-size: 16px;display: block;width: 100%;height: 100%">
                    {{getItemValue(scope.row,col)}}
                </a>
            </template>
        </el-table-column>
    </el-table>
</div>

js代码

var rootVm = new Vue({
    el: '#domestic_coord',
    data() {
        return {
            dataForm: {
                pageNum: 1,
                pageSize: 50,
            },
            columnList: [],
            tableData: {
                data: [],
                total: 0
            },
        }
    },
    created: function () {
        this.loadTableData();
    },
    watch: {
        //因为左边第一列固定会造成，样式错乱，每次需要更新布局
        "tableData": {
            handler() {
                this.$nextTick(() => {
                    this.refs.table.doLayout();
                });
            }
        }
    },
    mounted: function () {


        

    },
    methods: {
       
        //初始化表格数据
        loadTableData() {
            let index = layer.load(1, {
                shade: [0.1, '#fff'] //0.1透明度的白色背景
            });
            axios.post('/xxxxx/loadData', this.dataForm)
                .then(function (response) {
                    if (response.data.stnList.length > 0) {
                        rootVm.columnList = response.data.otherStnList;
                        rootVm.tableData.data = response.data.stnList;
                    }
                    rootVm.$refs.table.doLayout();
                    layer.close(index);
                })
                .catch(function (error) {
                    console.log(error)
                    layer.close(index);
                });
        },
       //单元格数据
        getItemValue(row, col) {
                if (row[col.stnId] == undefined) {
                    return "--";
                }
                return row[col.stnId]
        }
        ,
    //加载更多数据
        loadMoreTableData() {
            rootVm.dataForm.pageNum = rootVm.dataForm.pageNum + 1;
            this.loadTableData();
            this.$refs.table.bodyWrapper.scrollLeft = 0;
        },
        
    }
})

响应数据

{
    "otherStnList": [
        
        {
            "dataId": "111112b",
            "stnType": null,
            "stnName": "FY-2B",
            "ntcType": null,
            "longNom": 86.5,
            
        },
        {
            "dataId": "5555-2bs",
            "stnType": null,
            "stnName": "F2323BS",
            "ntcType": null,
            "longNom": 86.5,
            
        },
        {
            "dataId": "344-a-86.5e",
            "stnType": null,
            "stnName": "FY4242141.5E",
            "ntcType": null,
            "longNom": 86.5,
            
        },
        {
            "dataId": "1213-a-99.5e",
            "stnType": null,
            "stnName": "FYGE424299.5E",
            "ntcType": null,
            "longNom": 99.5,
            
        },
        {
            "dataId": "32222-96e",
            "stnType": null,
            "stnName": "SIGN42T-96E",
            "ntcType": null,
            "longNom": 96.0,
            
        },
        {
            "dataId": "3232-96e_1",
            "stnType": null,
            "stnName": "SIGN4214196E_1",
            "ntcType": null,
            "longNom": 96.2,
            
        },
        {
            "dataId": "3132-3",
            "stnType": null,
            "stnName": "STA4141ME-3",
            "ntcType": null,
            "longNom": 89.8,
            
        }
    ],
    "stnList": [
        {
            "dataId": "32132",
            "stnName": "APSTAR-2",
            "longNom": 134.0,
            "111112b": "未知"
        }
    ]
}