参考:https://www.jianshu.com/p/1f38eaffd070文章来源:https://www.toymoban.com/news/detail-696958.html
<el-table
style="width: 100%"
:data="getValues"
:show-header="false"
border
:cell-style="cellStyle"
>
<el-table-column
v-for="(item, index) in getHeaders"
:key="index"
:prop="item"
>
</el-table-column>
</el-table>
data() {
return {
headers: [
{
prop: 'date',
label: '套餐交割时间',
},
{
prop: 'name',
label: '价格(元/kWh)',
},
],
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 弄'
}
]
}
},
computed: {
getHeaders() {
return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
},
getValues() {
return this.headers.map(item => {
return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
});
}
},
methods: {
cellStyle ({row, column, rowIndex, columnIndex}) {
if(columnIndex===0) {
return 'background: #F5F7FA; textAlign: center'
}
return 'textAlign: center'
}
},
文章来源地址https://www.toymoban.com/news/detail-696958.html
到了这里,关于el-table纵向垂直表头的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!