demo
/
zhiqi
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化

This commit is contained in:
JenniferW 2025-08-03 23:37:44 +08:00
parent 688719c2cd
commit 443ee3d050
1 changed files with 66 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/order/intention/Step2.vue
View File

@ -119,28 +119,50 @@
top="40px"
:close-on-click-modal="false"
>
<div class="compare-dialog-cards">
<el-card
v-for="item in selectedCompareList"
:key="item.code"
class="compare-card"
>
<img :src="item.image" class="compare-card-img" />
<div class="compare-card-info">
<div class="compare-card-name">{{ item.label }}</div>
<div class="compare-card-code">{{ item.code }}</div>
</div>
</el-card>
</div>
<!-- 表格对比区，图片放在表头下方 -->
<div class="compare-table-wrap">
<el-table :data="compareTableData" border style="width: 100%">
<el-table-column prop="param" label="差异参数" width="180" />
<el-table-column prop="param" label="差异参数" width="180" class-name="param-col" align="center" header-align="center" />
<el-table-column
v-for="item in selectedCompareList"
:key="item.code"
:label="item.code"
:prop="item.code"
/>
align="center"
header-align="center"
>
<template #header="{ column }">
<div
style="
display: flex;
flex-direction: column;
align-items: center;
"
>
<img
v-if="
selectedCompareList.find(
(i) => i.code === column.label
)?.image
"
:src="
selectedCompareList.find(
(i) => i.code === column.label
).image
"
style="
width: 60px;
height: 40px;
object-fit: contain;
margin-top: 4px;
border-radius: 4px;
border: 1px solid #eee;
"
/>
<span>{{ column.label }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
</el-dialog>
@ -299,7 +321,12 @@ function queryAxleSuggestions(queryString, cb) {
)
.map((item) => ({ value: item.feature }));
// 增加'不限'选项
cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
cb([
{ value: "不限" },
...results.filter(
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
),
]);
}
function queryGearboxSuggestions(queryString, cb) {
const results = allParts
@ -310,7 +337,12 @@ function queryGearboxSuggestions(queryString, cb) {
item.feature.includes(queryString)
)
.map((item) => ({ value: item.feature }));
cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
cb([
{ value: "不限" },
...results.filter(
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
),
]);
}
function queryWheelSuggestions(queryString, cb) {
const results = allParts
@ -321,7 +353,12 @@ function queryWheelSuggestions(queryString, cb) {
item.feature.includes(queryString)
)
.map((item) => ({ value: item.feature }));
cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
cb([
{ value: "不限" },
...results.filter(
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
),
]);
}
function queryBrakeSuggestions(queryString, cb) {
const results = allParts
@ -332,7 +369,12 @@ function queryBrakeSuggestions(queryString, cb) {
item.feature.includes(queryString)
)
.map((item) => ({ value: item.feature }));
cb([{ value: "不限" }, ...results.filter((r, i, arr) => arr.findIndex(x => x.value === r.value) === i)]);
cb([
{ value: "不限" },
...results.filter(
(r, i, arr) => arr.findIndex((x) => x.value === r.value) === i
),
]);
}
</script>
@ -832,4 +874,9 @@ function queryBrakeSuggestions(queryString, cb) {
border-color: #2156f3 !important;
background-color: #2156f3 !important;
}
// 参数对比表格第一列背景色与表头一致
:deep(.el-table .param-col),
:deep(.el-table th.param-col) {
background: #f5f7fa !important;
}
</style>