|
el-table横向数据表格实现
众所周知，el-table大部分场景下包括官方例子，table都是纵向数据，就是渲染每一项的数据是一列的 
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',
},
]
最近有个需求它是横向数据渲染，是一行一行的，之前没写过一时间没思路，现在解决了记录一下。 
首先肯定要给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，里面的每一项就是表格一行的数据
{{ scope.row[index] || '--' }}
|