<template>
<div class="factory-container">
<div v-for="factory in pageList"
:key="factory.fact" class="factory-
table">
<h2>Factory
: {{ factory.fact }}</h2>
<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 h2 {
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 12px;
text-align
: center;
}
.header-row {
background-color
: #f2f2f2;
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连续的数据行，比如SU21/FA21/HO21/SP22这样为一组，SU22/FA22/HO22/SP23为下一组，SU23/FA23/HO23/SP24为下一组，以此类推
本文讨论了一个在使用AJAX交互显示<tr>标签时遇到的问题，即在Firefox浏览器中出现的布局错乱现象。通过分析不同浏览器的行为，提出了解决方案，包括使用display:table-row属性、JS兼容性处理和不加任何display属性的简单方法。文章旨在提供解决跨浏览器兼容性问题的思路。
扫一扫
1477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
