el-table横向数据表格实现
众所周知,el-table大部分场景下包括官方例子,table都是纵向数据,就是渲染每一项的数据是一列的
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="Date" width="180" />
<el-table-column prop="name" label="Name" width="180" />
<el-table-column prop="address" label="Address" />
</el-table>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
最近有个需求它是横向数据渲染,是一行一行的,之前没写过一时间没思路,现在解决了记录一下。
![在这里插入图片描述](https://img-blog.csdnimg.cn/4fabfe201e284b5da80b974dd9c469ec.png
- 首先肯定要给el-table加上
:show-header="false"
把表头取消 - 请求返回的数据跟上述差不多,要想横向渲染需要处理一下数据格式
const formatSettings = (data) => {
if (!data || !data.length) return []
let typeList = ['类别']
let testNameList = ['考核指标']
let percentList = ['占比(%)']
let criterionList = ['评分标准']
let ruleList = ['计算方法']
let formulaList = ['计算公式']
let explanationList = ['说明']
data.forEach(item => {
typeList.push(item.category)
testNameList.push(item.name)
percentList.push(item.percent)
criterionList.push(item.criterion)
ruleList.push(item.rule)
formulaList.push(item.formula)
explanationList.push(item.explanation)
})
typeList = [...typeList, "总分"]
percentList = [...percentList, "100"]
tableTitle.value = typeList
return [typeList, testNameList, percentList, criterionList, ruleList, formulaList, explanationList]
}
- 最后返回的数组就是表格的tableData,里面的每一项就是表格一行的数据
<el-table :data="tableData" border empty-text="暂无考核项" :show-header="false">
<el-table-column align="center" v-for="(item, index) in tableTitle " :key="index" width="160">
<template #default="scope">
{{ scope.row[index] || '--' }}
</template>
</el-table-column>
</el-table>