优化实时库存表格布局,调整列宽和表头显示,支持两行显示规格组合信息

master
huangjinysf 2 months ago
parent ad1f7877e6
commit 402b4bdfbf

@ -25,7 +25,7 @@
<el-table-column <el-table-column
prop="specification" prop="specification"
label="规格" label="规格"
width="120" width="80"
fixed="left" fixed="left"
/> />
@ -35,11 +35,14 @@
:key="column.key" :key="column.key"
:label="column.label" :label="column.label"
:prop="column.prop" :prop="column.prop"
min-width="150" min-width="100"
> >
<template #default="scope"> <template #default="scope">
{{ scope.row[column.prop] || '-' }} {{ scope.row[column.prop] || '-' }}
</template> </template>
<template #header>
<div v-html="column.label"></div> <!-- 使 v-html HTML <br> 生效 -->
</template>
</el-table-column> </el-table-column>
<!-- 总计列 --> <!-- 总计列 -->
@ -79,10 +82,14 @@ const dynamicColumns = computed(() => {
}))].sort(); // }))].sort(); //
return combinations.map(comb => { return combinations.map(comb => {
// model wire_disc
const hasWireDisc = comb.includes('::');
const [model, wire_disc] = hasWireDisc ? comb.split('::') : [comb, ''];
return { return {
key: comb, key: comb,
prop: comb, prop: comb,
label: comb.replace('::', '-') // '-' label: `${model}<br>${wire_disc}` // 使HTML
}; };
}); });
}); });
@ -230,6 +237,8 @@ onMounted(() => {
color: #606266; color: #606266;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
text-align: center; /* 可选:居中对齐列头 */
padding: 8px 0; /* 调整列头内间距,以适应两行显示 */
} }
:deep(.el-table td) { :deep(.el-table td) {

Loading…
Cancel
Save