This commit is contained in:
parent
688719c2cd
commit
443ee3d050
|
|
@ -119,28 +119,50 @@
|
||||||
top="40px"
|
top="40px"
|
||||||
:close-on-click-modal="false"
|
: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">
|
<div class="compare-table-wrap">
|
||||||
<el-table :data="compareTableData" border style="width: 100%">
|
<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
|
<el-table-column
|
||||||
v-for="item in selectedCompareList"
|
v-for="item in selectedCompareList"
|
||||||
:key="item.code"
|
:key="item.code"
|
||||||
:label="item.code"
|
:label="item.code"
|
||||||
:prop="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>
|
</el-table>
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|
@ -299,7 +321,12 @@ function queryAxleSuggestions(queryString, cb) {
|
||||||
)
|
)
|
||||||
.map((item) => ({ value: item.feature }));
|
.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) {
|
function queryGearboxSuggestions(queryString, cb) {
|
||||||
const results = allParts
|
const results = allParts
|
||||||
|
|
@ -310,7 +337,12 @@ function queryGearboxSuggestions(queryString, cb) {
|
||||||
item.feature.includes(queryString)
|
item.feature.includes(queryString)
|
||||||
)
|
)
|
||||||
.map((item) => ({ value: item.feature }));
|
.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) {
|
function queryWheelSuggestions(queryString, cb) {
|
||||||
const results = allParts
|
const results = allParts
|
||||||
|
|
@ -321,7 +353,12 @@ function queryWheelSuggestions(queryString, cb) {
|
||||||
item.feature.includes(queryString)
|
item.feature.includes(queryString)
|
||||||
)
|
)
|
||||||
.map((item) => ({ value: item.feature }));
|
.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) {
|
function queryBrakeSuggestions(queryString, cb) {
|
||||||
const results = allParts
|
const results = allParts
|
||||||
|
|
@ -332,7 +369,12 @@ function queryBrakeSuggestions(queryString, cb) {
|
||||||
item.feature.includes(queryString)
|
item.feature.includes(queryString)
|
||||||
)
|
)
|
||||||
.map((item) => ({ value: item.feature }));
|
.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>
|
</script>
|
||||||
|
|
||||||
|
|
@ -832,4 +874,9 @@ function queryBrakeSuggestions(queryString, cb) {
|
||||||
border-color: #2156f3 !important;
|
border-color: #2156f3 !important;
|
||||||
background-color: #2156f3 !important;
|
background-color: #2156f3 !important;
|
||||||
}
|
}
|
||||||
|
// 参数对比表格第一列背景色与表头一致
|
||||||
|
:deep(.el-table .param-col),
|
||||||
|
:deep(.el-table th.param-col) {
|
||||||
|
background: #f5f7fa !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue