feat(comparison): 添加产品对比页面的增加产品功能

- 在表格的行标题列添加增加产品的按钮
- 实现按钮点击时更新 showComparison 属性,关闭对比页面
- 优化表格样式,调整列宽和添加圆角样式
This commit is contained in:
陈昱达
2025-06-13 10:24:07 +08:00
parent c9a9444b4e
commit ad5b0078f4
2 changed files with 23 additions and 3 deletions

View File

@@ -42,7 +42,7 @@
</div>
<div v-else>
<comparsion :list="comparisonMap"></comparsion>
<comparsion :list="comparisonMap" :showComparison.sync="showComparison"></comparsion>
</div>
</div>
</template>

View File

@@ -2,10 +2,14 @@
<div style="touch-action: unset" class="comparsion-container">
<el-table :data="tableData" style="width: 100%" border :height="getTableHeight()">
<!-- 左侧行标题 -->
<el-table-column fixed prop="rowTitle" label="指标" width="100"></el-table-column>
<el-table-column fixed prop="rowTitle" width="100">
<template slot="header" slot-scope="scope">
<button class="header-button" @click="emits">+ 增加产品</button>
</template>
</el-table-column>
<!-- 动态列根据 list 生成 -->
<el-table-column v-for="(item, index) in list" :key="index" :label="item.title" width="150">
<el-table-column v-for="(item, index) in list" :key="index" :label="item.title" width="200">
<template #default="scope">
<!-- 根据 item.id 映射对应的字段名比如 b1b2b3 -->
{{ formatValue(scope.row[item.id]) }}
@@ -19,6 +23,10 @@ import { compare } from '@/api/generatedApi'
export default {
props: {
showComparison: {
type: Boolean,
default: false,
},
list: {
type: Array,
default: () => [],
@@ -41,6 +49,10 @@ export default {
},
},
methods: {
emits() {
console.log(123)
this.$emit('update:showComparison', false)
},
getCompare() {
let ids = this.list.map((item) => {
return item.id
@@ -88,9 +100,17 @@ export default {
.comparsion-container {
height: calc(100vh - 20px);
padding: 10px;
overflow: hidden;
}
.header-button {
background: transparent;
outline: none;
border: none;
}
::v-deep .el-table {
border-radius: 8px;
& th {
&.el-table__cell {
background: #1989fa;