前言：写此文章的原因呢是因为，太无聊了，考虑到前端小伙伴可能遇到类似的需求，所以我决定贡献出我的代码，也不一定是代码啦，或许只是一个实现思路，自己写过的可以忽略。
-
虽然我已经从事前端工作几年了，但是vue我也才刚刚投入使用，然后，我们多变的产品需求开始是这样子的：
-
看图：
（：处于数据的保密性，我上了马赛克，如上图，左列是表头，右边是表头对应的数据，开始产品说这是一个纯展示的界面，于是，我是这样处理的：
我在element-ui的官网api上没看到有对应的属性配置，所以只能想办法自己处理了，我将左边的表头和右边的数据分为两种表格，左边是一个数据固定的表格，右边是按照传入数据动态渲染的表格，所以我将左边作为一个单独表格然后放到界面左边，右边的就循环生成按顺序拼接到右边主要的代码是这样子的：
//表格部分
<template> <div class="box" style="display:flex">
<el-table ref="mainTable" :data="tddata" border style="float:left;min-width: 200px;" v-loading="listLoading"
size="mini" :stripe="true" id="ptd" :show-header="false">
<el-table-column align="center" prop="" label="-">
<template slot-scope="scope">
<span class="left-td">{{ scope.row.name}}</span>
</template>
</el-table-column>
</el-table>
<el-table :data="item.data" border style="float: left;border-left-width:0px;min-width: 300px;"
v-loading="listLoading" size="mini" :stripe="true" v-for="item in tds" :key="item.id" :show-header="false">
<el-table-column align="center" :label="item.name">
<template slot-scope="scope">
<span v-if="scope.row.value!=''" class="line-limit-length">
{{valueFormat(scope.row.value) }}
</span>
<i v-else>-</i>
</template>
</el-table-column>
</el-table>
</div>
</template>
//方法部分
mounted() {
const query = this.$route.query;
const list = query.list;
const col = query.columns
this.dataFormat(list, col)
},dataFormat(list, col) {
const arr = [], dataList = [];
col.forEach(element => {
arr.push({
name: element.label,
value: element.prop,
})
});
this.tddata = arr;
for (let key in list) {
const dataArr = [];
for (var i = 0; i < arr.length; i++) {
let val = list[key][arr[i].value] != null && list[key][arr[i].value] != undefined ? list[key][arr[i].value] : ''
dataArr.push({ value: val })
}
dataList.push({
id: key,
name: '-',
data: dataArr
})
}
this.tds = dataList;
},
-
后来，我们可恶的产品经理说要给这个纵向表格第一行固定，然后最左边也固定，我想着按照拼接表格的方式实现实在是不方便，所以决定用第二种方式来解决上述需求，这样就能使用element-ui这个组件库的表格组件上面的属性了方法如下：
//表格部分按照element-ui表格组件的常规方式，这里只写我数据格式化的方法 // 行列互换方法 generateVerticalTableData(header, data) { var tableData = header.map(n => { // return [n.name, ...data.map((o) => o[n.value])] var dataItem = data.reduce((pre, cur, index) => { pre[
value-${index}] = cur[n.prop]; return pre; }, {}) dataItem.value = n.label; return dataItem; }); var columns = [] for(let key in tableData[0]){ columns.push({ prop:key, label:tableData[0][key] }) } columns = [columns[columns.length-1],...columns.slice(0,columns.length-1)] const arr = tableData.slice(1) return { columns, arr } }
调用上述方法，将常规表头数据以及后端返回的常规表格数据传入，就能够得到符合需求的数据格式了。
