效果图:
左侧是表格项,顶部是年份
这种适合在手机等小屏展示表格数据
后段返回的数据格式
0: {key: 2010, year: 2010, aAmount: 946, bAmount: 681, cAmount: 469, …}
1: {key: 2011, year: 2011, aAmount: 543, bAmount: 869, cAmount: 80, …}
2: {key: 2012, year: 2012, aAmount: 442, bAmount: 385, cAmount: 412, …}
3: {key: 2013, year: 2013, aAmount: 847, bAmount: 703, cAmount: 539, …}
....
需要处理一下,将纵向年份的表格数据,改成横向的数据
处理后格式:
0: {title: "销售额 1", key: "aAmount", year0: 946, year1: 543, year2: 442, …}
1: {title: "销售额 2", key: "bAmount", year0: 681, year1: 869, year2: 385, …}
2: {title: "销售额 3", key: "cAmount", year0: 469, year1: 80, year2: 412, …}
3: {title: "销售额 4", key: "dAmount", year0: 13, year1: 86, year2: 408, …}
4: {title: "销售额 5", key: "eAmount", year0: 443, year1: 941, year2: 970, …}
还需要处理一下左侧第一列单元格的样式
完整代码
<template>
<div>
<h3>左侧表头表格</h3>
<a-table
class="container"
:columns="columns"
:data-source="fixedData"
:scroll="{ x: 1200 }"
bordered
>
<template #headerCell="{ record, index, column }">
<template v-if="column.dataIndex === 'title'">
<div class="title">
<div class="left">销售额</div>
<div class="line"></div>
<div class="right">年份</div>
</div>
</template>
</template>
</a-table>
</div>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
setup() {
const fixedData = ref([]);
for (let i = 2010; i < 2023; i += 1) {
fixedData.value.push({
key: i,
year: i,
aAmount: Math.floor(Math.random() * 1000),
bAmount: Math.floor(Math.random() * 1000),
cAmount: Math.floor(Math.random() * 1000),
dAmount: Math.floor(Math.random() * 1000),
eAmount: Math.floor(Math.random() * 1000),
});
}
// 表头样式
const customHeaderCell = () => {
return {
class: "custom-title-row",
};
};
// 单元格样式
const customCell = (column, index) => {
// console.log(column, index);
return {
class: "custom-row",
};
};
const columns = ref([
{
title: "",
dataIndex: "title",
fixed: true,
customCell: customCell,
customHeaderCell: customHeaderCell,
},
]);
const handleData = () => {
const columnsArr = [];
const newTable = [
{ title: "销售额1", key: "aAmount" },
{ title: "销售额2", key: "bAmount" },
{ title: "销售额3", key: "cAmount" },
{ title: "销售额4", key: "dAmount" },
{ title: "销售额5", key: "eAmount" },
];
fixedData.value.forEach((item, i) => {
const obj = {
title: item.year,
dataIndex: `year${i}`,
};
columnsArr.push(obj);
});
newTable.forEach((item) => {
fixedData.value.forEach((sItem, i) => {
item[`year${i}`] = sItem[item.key];
});
});
columns.value = columns.value.concat(columnsArr);
console.log(fixedData.value, newTable);
fixedData.value = newTable;
};
onMounted(() => {
handleData();
});
return {
fixedData,
columns,
};
},
};
</script>
<style lang="less">
.ant-table-thead > tr > .custom-title-row {
padding: 0;
}
.custom-row {
background-color: rgb(156, 236, 26);
}
tr.ant-table-row:hover > td.custom-row {
background-color: rgb(156, 236, 26);
}
/* 表头样式 */
.title {
position: relative;
height: 55px;
.left {
position: absolute;
left: 5px;
bottom: 5px;
}
.right {
position: absolute;
right: 5px;
top: 5px;
}
.line {
position: absolute;
height: 1px;
background: #ddd;
width: 104px;
transform: rotate(33deg);
top: 27px;
left: -10px;
}
}
</style>
标签：const,title,单元格,year,表头,销售额,key,左侧,Math From： https://www.cnblogs.com/steamed-twisted-roll/p/17405521.html