在某些需求里需要用到 行列转置 的表格,但 el-table 提供的基本表格是不支持行列转置的,这样就需要对这个表格进行二次开发。下面来看具体实现的效果:
具体实现方式
基本原理就是对原有的可渲染的数据结构进行处理,表头与表格数据要按动态的数据去处理。这里我们提供了两种方式去实现:
原数据格式:
tableHead: [
{
prop: 'date',
label: '日期',
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'address',
label: '地址',
},
],
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
第一种:
初始化页面时对数据进行手动循环处理,html 部分借助 template 渲染,缺点是处理略复杂,具体代码如下(只摘抄了关键代码,省略了 vue 的基本结构):
<el-table
border
:data="tableDataNew"
>
<el-table-column
v-for="(item, index) in columnData"
:key="index"
:prop="item.prop"
:label="item.label"
>
<template slot-scope="{ row }">
<div>
{{ row[item.prop] }}
</div>
</template>
</el-table-column>
</el-table>
mounted(){
this.init()
},
init() {
const columnObj = {} //创建标题数组中第一个对象
columnObj.label = '日期'//第一个标题名称
columnObj.prop = 'title'//第一个标题名称对应的字段
this.columnData.push(columnObj) //第一个标题 放入标题数组中
this.tableDataNew.push({ 'title': '姓名' })
this.tableDataNew.push({ 'title': '地址' })
let _this = this;
var props = 'prop' //自定义字段名称
this.tableData.forEach((item, index) => {
const columnObj = {}
columnObj.label = item.date// 每一列的标题的名称
columnObj.prop = props + index //自定义每一列标题字段名称
_this.columnData.push(columnObj)
this.$set(this.tableDataNew[0], columnObj.prop, item.name)
this.$set(this.tableDataNew[1], columnObj.prop, item.address)
})
}
第二种:
借助 computed 计算属性、 reduce 函数实现数据处理,但是隐藏了原来的表头,增加了样式处理的成本,优点是处理逻辑比较简单。
<el-table
style="width: 100%"
:data="tableDataNew"
:show-header="false"
>
<el-table-column
v-for="(item, index) in columnData"
:key="index"
:prop="item"
>
</el-table-column>
</el-table>
computed: {
columnData() {
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
},
tableDataNew() {
return this.tableHead.map(item => {
return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label});
});
}
},
处理之后的表格数据格式:
columnData:
["title", "value0", "value1", "value2", "value3"]
tableDataNew:
["title", "value0", "value1", "value2", "value3"]
到这里两种方式就介绍完了,大家可以尝试,如果有更好的方式,欢迎大家不吝赐教。