<template>
<div class="factory-container">
<div v-for="factory in pageList" :key="factory
.fact" class="factory-
table">
<h
2>Factory: {{ factory
.fact }}</h
2>
<div class="
table-wrapper">
<
table class="data-
table">
<!-- 表头 -->
<thead>
<tr class="header-row">
<th rowspan="
2">Factory</th>
<th rowspan="
2">Season</th>
<th colspan="
2">
<div class="two-line-header">
<span>Golf</span>
<span>(CLUB SPORTS)</span>
</div>
</th>
<th colspan="
2">
<div class="two-line-header">
<span>Jordan</span>
<span>(Jordan W's/Mens)</span>
</div>
</th>
<th colspan="3">
<div class="two-line-header">
<span>Kids</span>
<span>(Jordan GS/PS/TD)</span>
</div>
</th>
<th colspan="3">
<div class="two-line-header">
<span>Sports lifestyle</span>
<span>(ACG/BOOTS,CLASSICS,SPORTSTYLE INNOVATION)</span>
</div>
</th>
<th rowspan="
2">總計</th>
<th rowspan="
2">TOTAL ALL 聯名款</th>
</tr>
<tr class="sub-header-row">
<th>
<div class="two-line-header">
<span>JD Golf</span>
<span>Golf</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>GOLF</span>
<span>Golf</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>JD</span>
<span>JD 聯名款</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>JD</span>
<span>JD 成人鞋</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>JD GS</span>
<span>JD大童</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>JD PS</span>
<span>JD中童</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>JD TD</span>
<span>JD小童</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>Inline</span>
<span>NSW普通款</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>NSW FUEL</span>
<span>NSW聯名款</span>
</div>
</th>
<th>
<div class="two-line-header">
<span>SLT/SP/GEL/FUL</span>
<span>快速訂單</span>
</div>
</th>
</tr>
</thead>
<!-- 表体 -->
<tbody>
<template
v-for="season in getSeasons(factory
.infoList)"
:key="season"
>
<tr class="data-row">
<td rowspan="
2">{{ factory
.fact }}</td>
<td rowspan="
2">{{ season }}</td>
<!-- Golf -->
<td>
{{ getValue(factory
.infoList, season, "JD GOLF 高尔夫") }}
</td>
<td>{{ getValue(factory
.infoList, season, "GOLF") }}</td>
<!-- Jordan -->
<td>{{ getValue(factory
.infoList, season, "JD 聯名款") }}</td>
<td>{{ getValue(factory
.infoList, season, "JD 成人鞋") }}</td>
<!-- Kids -->
<td>
{{ getValue(factory
.infoList, season, "JD大童") }}
</td>
<td>
{{ getValue(factory
.infoList, season, "JD 中童") }}
</td>
<td>
{{ getValue(factory
.infoList, season, "JD小童") }}
</td>
<!-- Sports lifestyle -->
<td>
{{ getValue(factory
.infoList, season, "NSW 普通款") }}
</td>
<td>{{ getValue(factory
.infoList, season, "NSW 聯名款") }}</td>
<td>
{{
getValue(
factory
.infoList,
season,
"SLT/SP/GEL/FUEL 快速訂單"
)
}}
</td>
<!-- 总计 -->
<td rowspan="
2">
{{ getSeasonTotal(factory
.infoList, season) }}
</td>
<td rowspan="
2">
{{ getTotalUnion(factory
.infoList, season) }}
</td>
</tr>
<tr class="data-row">
<!-- 第二
行数据可以根据需要添加 -->
</tr>
</template>
</tbody>
</
table>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import { financeClassifyList } from "@/api/planning/page";
const pageList = ref([]);
const loading = ref(true);
function getList() {
loading
.value = true;
financeClassifyList()
.then((response) => {
pageList
.value = response
.data;
loading
.value = false;
});
}
// 获取所有季节
列表（保持原始顺序）
const getSeasons = (infoList) => {
if (!infoList) return [];
const seasons = [];
const seenSeasons = new Set();
infoList
.forEach((item) => {
if (item
.season && !seenSeasons
.has(item
.season)) {
seenSeasons
.add(item
.season);
seasons
.push(item
.season);
}
});
return seasons;
};
// 分类名称规范化函数（处理空格和简繁体）
const normalizeClassify = (classify) => {
if (!classify) return '';
return classify
.replace(/\s+/g, '') // 移除所有空格
.replace(/聯名款/g, '联名款') // 统一简繁体
.replace(/普通款/g, '普通款'); // 保持一致性（虽然简繁体相同）
};
const getValue = (infoList, season, classify) => {
if (!infoList) return "0";
const normalizedTarget = normalizeClassify(classify);
const item = infoList
.find(i =>
i
.season == season &&
i
.financeClassify &&
normalizeClassify(i
.financeClassify) === normalizedTarget
);
return item ? item
.total : "0";
};
// 获取某个季节所有联名款的总计
const getTotalUnion = (infoList, season) => {
if (!infoList) return 0;
const unionClasses = ["JD 聯名款", "NSW 聯名款"];
return infoList
.filter(
(item) =>
item
.season == season && unionClasses
.includes(item
.financeClassify)
)
.reduce((sum, item) => sum + (parseInt(item
.total) || 0), 0);
};
const getSeasonTotal = (infoList, season) => {
if (!infoList) return 0;
const unionClasses = [
"JD Golf Golf",
"GOLF Golf",
"JD 成人鞋",
"JD 聯名款",
"NSW 聯名款",
"SLT/SP/GEL/FUEL 快速訂單",
"Inline NSW普通款",
"JD TD JD小童",
"JD PS JD中童",
"JD GS JD大童",
];
return infoList
.filter(
(item) =>
item
.season == season && unionClasses
.includes(item
.financeClassify)
)
.reduce((sum, item) => sum + (parseInt(item
.total) || 0), 0);
};
getList();
</script>
<style scoped>
.factory-container {
display: flex;
flex-direction: column;
gap: 30px;
padding:
20px;
}
.factory-
table {
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
}
.factory-
table h
2 {
background-color: #f5f5f5;
padding: 10px;
margin: 0;
border-bottom: 1px solid #ddd;
}
.table-wrapper {
overflow-x: auto;
}
.data-
table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.data-
table th,
.data-
table td {
border: 1px solid #ddd;
padding: 8px 1
2px;
text-align: center;
}
.header-row {
background-color: #f
2f
2f
2;
font-weight: bold;
}
.sub-header-row {
background-color: #e6e6e6;
}
.data-row:nth-child(even) {
background-color: #f9f9f9;
}
.data-row:hover {
background-color: #f1f1f1;
}
.two-line-header {
display: flex;
flex-direction: column;
line-height: 1
.2;
}
.two-line-header span {
display: block;
}
/* 调整表头
行高以适应两
行文本 */
.data-
table th {
padding: 4px 8px;
line-height: 1
.2;
}
.sub-header-row th {
height: 50px; /* 根据需要调整高度 */
vertical-align: bottom;
}
</style>
分析以上代码，当前我需要在显示
列表中加一些总计
行，把数据
行根据季节进
行分组，然后每一组的下一
行就是添加总计
行的
位置，季节分组的规则是以SU/FA/HO/SP连续的数据
行，比如SU
21/FA
21/HO
21/SP
22这样为一组，SU
22/FA
22/HO
22/SP
23为下一组，SU
23/FA
23/HO
23/SP
24为下一组，以此类推
本文分享了如何使用JavaScript在任意位置动态添加和删除表格行的方法，并附带了一个实用的小例子。
扫一扫
1314
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
