合并求和滚动条问题
先展示实现后的效果
element-ui 有提供合计方法，单配合上左侧固定部分太长会导致选择不到滚动条，网上有说修改 CSS 层级样式有效，经过尝试效果不好。
这里说下我的实现思路，我将两个表格进行了并排，基本信息区一个表格，后面动态部分是一个表格，两个表格同时开启合计方法。公用一个外部 CSS 左侧表格占固定部分，右侧表格就能滚动了，下面是实现代码
数据对象结构
// 询价表单数据
inquiryForm: {
// 表格数据
itemList: [{
// 基本细心
id: null,
productName: null,
specsValue: null,
unit: null,
applyNum: null,
// 动态列组
supplierGroups: [{
id: null,
productId: null,
applyNum: null,
unitPriceIncludingTax: null,
unitPriceExcludingTax: null,
totalAmount: null,
taxRate: null,
taxAmount: null,
deliveryDate: null,
supplierId: null,
supplierName: null,
payWay: '',
remark: null,
}],
}],
attachmentList:[]
},<div style="overflow-x: scroll">
<div class="table-scroll-container">
<div :class="supplierGroups.length === 0 ? 'special-info' : 'base-info'">
<el-table
:data="inquiryForm.itemList"
border
stripe
:key="tableKey"
show-summary
:summary-method="getSummariesBase"
>
<el-table-column label="基本信息" width="660" key="000" align="center">
<!-- 固定列 -->
<el-table-column prop="productName" label="物料信息" key="111" width="150">
<template #default="{ row, $index }">
<el-form-item>{{ row.productName }}</el-form-item>
</template>
</el-table-column>
<el-table-column prop="specsValue" label="物料信息" key="222" width="150">
<template #default="{ row, $index }">
<el-form-item>{{ row.specsValue }}</el-form-item>
</template>
</el-table-column>
<el-table-column prop="historyPrice" label="历史询价" key="333" align="center" width="80">
<template #default="{ row }">
<el-form-item>
<el-button @click="showHistoryPrice(row.productId)" type="text" class="color-blue">查看
</el-button>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="applyNum" key="444" label="采购数量" width="160">
<template #default="{ row, $index }">
<el-form-item :prop="'itemList.' + $index + '.applyNum'" :rules="rules.applyNum">
<el-input v-model="row.applyNum" style="width: 100%" @input="changeApplyNum(row)" placeholder="采购数量">
<template slot="append">{{ row.unit ? row.unit : '' }}</template>
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="unitPriceIncludingTax" key="555" label="拟签单价(元)" width="120">
<template #default="{ row }">
<el-form-item>
{{ row.unitPriceIncludingTax }}
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="supplierId" key="666" label="拟签供应商" width="150" fixed="left">
<template #default="{ row, $index }">
<el-form-item :prop="'itemList.' + $index + '.supplierId'" :rules="rules.supplierId">
<el-select
v-model="row.supplierId"
placeholder="请选择"
@change="handleProposedSupplierChange(row)"
style="width: 100%"
>
<el-option
v-for="supplierGroup in supplierGroups"
:key="supplierGroup.id"
:label="supplierGroup.name"
:value="supplierGroup.id"
/>
</el-select>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<!-- 空白补充列 -->
<el-table-column label="请添加供应商" v-if="supplierGroups.length === 0" min-width="200" key="supplierNotHave" align="center">
<template #default="{ row, $index }">
<el-form-item>
</el-form-item>
</template>
</el-table-column>
<!-- 固定在右侧的移除操作列 -->
<el-table-column v-if="supplierGroups.length === 0" label="操作" width="100" key="base_dispose" fixed="right" align="center">
<template #default="{ row, $index }">
<el-form-item>
<el-button type="text" size="small" class="color-danger" @click="removeMaterialRow($index)">移除
</el-button>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
<div style="width: 811px;flex-shrink: 0" v-if="supplierGroups.length > 0"></div>
<div class="supplier-info" v-if="supplierGroups.length > 0">
<el-table
:data="inquiryForm.itemList"
border
stripe
:key="tableKey"
show-summary
:summary-method="getSummariesSupplier"
:cell-style="cellStyle"
>
<!-- 动态供应商列组 -->
<el-table-column
:column-key="supplierGroup.key"
:key="supplierGroup.key"
v-for="(supplierGroup, groupIndex) in supplierGroups"
:label="supplierGroup.name"
align="center"
>
<template #header>
<div class="supplier-group-header">
<div style="display: flex; align-items: flex-end; gap: 3px;">
<span style="line-height: 1;">{{ `${supplierGroup.name ? supplierGroup.name : ''}` }}</span>
<span style="font-size: 12px; line-height: 1;">{{ `${supplierGroup.linkman ? supplierGroup.linkman : ''}`}}</span>
<span style="font-size: 10px; line-height: 1;">{{ `${supplierGroup.mobile ? '(' + supplierGroup.mobile + ')' : ''}`}}</span>
</div>
<span v-if="!disabled" class="color-danger el-button--text" style="font-size: 12px; cursor: pointer; font-weight: 500;" @click="removeSupplierGroup(groupIndex, supplierGroup)">删除</span>
<span v-else class="color-danger el-button--text" style="font-size: 12px; font-weight: 500;" >删除</span>
</div>
</template>
<!-- 不含税单价 -->
<el-table-column label="不含税单价" min-width="130" align="center">
<template #default="{ row }">
<el-form-item>
<el-input
v-model="row.supplierGroups[groupIndex].unitPriceExcludingTax"
placeholder="自动计算"
readonly
style="width: 100%"
/>
</el-form-item>
</template>
</el-table-column>
<!-- 税率% -->
<el-table-column label="税率%" min-width="100" align="center">
<template #default="{ row, $index }">
<el-form-item :prop="'itemList.' + $index + '.supplierGroups.' + groupIndex + '.taxRate'" :rules="rules.taxRate">
<el-input
v-model="row.supplierGroups[groupIndex].taxRate"
@input="calculateTaxAmounts(row, groupIndex)"
style="width: 100%"
/>
</el-form-item>
</template>
</el-table-column>
<!-- 含税单价 -->
<el-table-column label="含税单价" min-width="130" align="center">
<template #default="{ row, $index }">
<el-form-item :prop="'itemList.' + $index + '.supplierGroups.' + groupIndex + '.unitPriceIncludingTax'" :rules="rules.unitPriceIncludingTax">
<el-input
v-model="row.supplierGroups[groupIndex].unitPriceIncludingTax"
@input="calculateTaxAmounts(row, groupIndex)"
style="width: 100%"
/>
</el-form-item>
</template>
</el-table-column>
<!-- 税额 -->
<el-table-column label="税额" min-width="130" align="center">
<template #default="{ row }">
<el-form-item>
<el-input
v-model="row.supplierGroups[groupIndex].taxAmount"
placeholder="自动计算"
readonly
style="width: 100%"
/>
</el-form-item>
</template>
</el-table-column>
<!-- 含税总价 -->
<el-table-column label="含税总价" min-width="130" align="center">
<template #default="{ row }">
<el-form-item>
<el-input
v-model="row.supplierGroups[groupIndex].totalAmount"
placeholder="自动计算"
readonly
style="width: 100%"
/>
</el-form-item>
</template>
</el-table-column>
<!-- 承诺交期 -->
<el-table-column label="承诺交期" min-width="140" align="center">
<template #default="{ row }">
<el-form-item>
<el-date-picker
v-model="row.supplierGroups[groupIndex].deliveryDate"
@change="updateItemSupplierInfo(row, row.supplierGroups[groupIndex])"
type="date"
size="small"
style="width: 100%"
/>
</el-form-item>
</template>
</el-table-column>
<!-- 付款方式 -->
<el-table-column label="付款方式" min-width="130" align="center">
<template #default="{ row }">
<el-form-item>
<el-input
v-model="row.supplierGroups[groupIndex].payWay"
@change="updateItemSupplierInfo(row, row.supplierGroups[groupIndex])"
placeholder="手动输入"
style="width: 100%"
/>
</el-form-item>
</template>
</el-table-column>
</el-table-column>
<!-- 固定在右侧的移除操作列 -->
<el-table-column label="操作" width="100" key="dispose" fixed="right" align="center">
<template #default="{ row, $index }">
<el-form-item>
<el-button type="text" size="small" class="color-danger" @click="removeMaterialRow($index)">移除
</el-button>
</el-form-item>
</template>
</el-table-column>
</el-table>
</div>
</div>
</div>CSS 样式
.table-scroll-container {
width: 100%;
display: flex;
.base-info {
flex-shrink: 0;
position: absolute;
left: 0;
top: 0;
z-index: 999;
}
.special-info{
position: initial;
width: 100%;
}
}