Skip to content

Instantly share code, notes, and snippets.

@jackytang
Last active March 23, 2024 03:37
Show Gist options
  • Save jackytang/f19cea2bc7d6dc0d226271ddc2e4067c to your computer and use it in GitHub Desktop.
Save jackytang/f19cea2bc7d6dc0d226271ddc2e4067c to your computer and use it in GitHub Desktop.
多级表头
<template>
<el-table :data="playerLevelStatisticsList" stripe :span-method="objectSpanMethod" show-summary>
<el-table-column prop="date" fixed label="日期" align="center" width="100"></el-table-column>
<el-table-column prop="platform" fixed label="渠道" align="center" width="100"></el-table-column>
<el-table-column v-for="(item, index) in levelList" :key="index" :label="item" align="center">
<el-table-column label="在线数" min-width="70" align="center">
<template #default="scope">
{{ scope.row.list[index]?.onlineCount ?? 0 }}
</template>
</el-table-column>
<el-table-column label="总人数" min-width="70" align="center">
<template #default="scope">
{{ scope.row.list[index]?.totalCount ?? 0}}
</template>
</el-table-column>
<el-table-column label="占比" min-width="70" align="center">
<template #default="scope">
{{ scope.row.list[index]?.percent ?? 0}}
</template>
</el-table-column>
</el-table-column>
</el-table>
</template>
<script lang="ts" setup>
import type { TableColumnCtx } from 'element-plus'
interface User {
id: string
name: string
amount1: string
amount2: string
amount3: number
}
interface SpanMethodProps {
row: User
column: TableColumnCtx<User>
rowIndex: number
columnIndex: number
}
const objectSpanMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1,
}
} else {
return {
rowspan: 0,
colspan: 0,
}
}
}
}
const levelList = ["1", "2", "3", "4", "5", "7", "8", "12"];
const playerLevelStatisticsList = [
{
"date": "2024-03-20",
"platform": "wx",
"list": [
{
"onlineCount": 0,
"level": 1,
"totalCount": 9,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 2,
"totalCount": 1,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 3,
"totalCount": 1,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 4,
"totalCount": 4,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 5,
"totalCount": 1,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 7,
"totalCount": 1,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 8,
"totalCount": 1,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 12,
"totalCount": 1,
"percent": "0%"
}
],
"levelList": null
},
{
"date": "2024-03-20",
"level": null,
"onlineCount": null,
"allCount": null,
"platform": "dy",
"list": [
{
"onlineCount": 0,
"level": 1,
"totalCount": 4,
"percent": "0%"
},
{
"onlineCount": 0,
"level": 3,
"totalCount": 6,
"percent": "0%"
}
],
"levelList": null
},
{
"date": "2024-03-20",
"level": null,
"onlineCount": null,
"allCount": null,
"platform": "ttb",
"list": [
{
"onlineCount": 1,
"level": 1,
"totalCount": 1,
"percent": "100%"
}
],
"levelList": null
},
{
"date": "2024-03-20",
"level": null,
"onlineCount": null,
"allCount": null,
"platform": "visit",
"list": [
{
"onlineCount": 2,
"level": 1,
"totalCount": 2,
"percent": "100%"
}
],
"levelList": null
}
]
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment