一、实现效果:
表头纵向的el-table表格,每个内容的单元格长度为30px,单元格不足6格的补足6格空格,超出6格的用实际内容填充。
二、实现方式:
a、数据结构调整:
- 通常表格数据是以列为主,每列对应一个字段。为了实现纵向表头,需要将数据结构调整为以行为主,具体来说,每行对应一个表头(例如 "工厂焊(A)","现场焊(M)" 等),然后在每一行中填充列数据。
- 每行的数据可以以对象的形式定义,
label
表示纵向表头的名称,values
数组表示该表头下的列数据。
b、动态生成列:
- 使用
el-table-column
标签,通过v-for
动态生成列,并根据行数据的values
数组进行填充。 - 这里的关键是
v-for
的应用:通过遍历values
数组生成多列,每一列的数据来源于values
的不同索引。
代码实现:
<template>
<div style="width: 300px; font-size: 12px;">
<el-table
:data="processedTableData"
border
:show-header="false"
class="custom-table"
>
<el-table-column
prop="label"
width="120"
>
<template slot-scope="scope">
{{ scope.row.label }}
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in rowLength"
:key="index"
width="30"
>
<template slot-scope="scope">
{{ scope.row.values[index] !== undefined ? scope.row.values[index] : '' }}
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
rowLength: 0,
tableData: [
{
label: "工厂焊(A)",
values: Array(5).fill('')
},
{
label: "现场焊(M)",
values: [4, 5, 6]
},
{
label: "现场调整焊(F)",
values: [7, 8, 9, 9]
}
]
};
},
computed: {
processedTableData() {
return this.tableData.map(row => {
while (row.values.length < this.rowLength) {
row.values.push('');
}
return row;
});
}
},
mounted() {
// 放在请求到tableData数据后
const maxValuesLength = Math.max(
...this.tableData.map(row => row.values.length)
);
this.rowLength = maxValuesLength > 6 ? maxValuesLength : 6;
console.log(this.tableData[0].values, 'tableData---');
}
};
</script>