🐛(component): 修复 table 组件复杂表头存在多个时, 部分表头边框无法正常显示

This commit is contained in:
就眠儀式 2022-11-15 09:38:14 +08:00
parent a062e58312
commit 11eada1d9d
2 changed files with 63 additions and 14 deletions

View File

@ -518,9 +518,7 @@ const childrenExpandSpace = computed(() => {
);
});
/**
* @remark 排除 hide
*/
const renderFixedStyle = (column: any, columnIndex: number) => {
if (column.fixed) {
if (column.fixed == "left") {
@ -563,6 +561,51 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
return {} as StyleValue;
};
/**
* @remark 排除 hide
*/
const renderHeadFixedStyle = (column: any, columnIndex: number, tableHeadColumn: any[]) => {
if (column.fixed) {
if (column.fixed == "left") {
var left = 0;
for (var i = 0; i < columnIndex; i++) {
if (
props.columns[i].fixed &&
props.columns[i].fixed == "left" &&
tableColumnKeys.value.includes(props.columns[i].key)
) {
left = left + Number(props.columns[i]?.width?.replace("px", ""));
}
}
return { left: `${left}px` } as StyleValue;
} else {
var right = 0;
for (var i = columnIndex + 1; i < props.columns.length; i++) {
if (
props.columns[i].fixed &&
props.columns[i].fixed == "right" &&
tableColumnKeys.value.includes(props.columns[i].key)
) {
right = right + Number(props.columns[i]?.width?.replace("px", ""));
}
}
return { right: `${right}px` } as StyleValue;
}
} else {
var isLast = true;
for (var i = columnIndex + 1; i < tableHeadColumn.length; i++) {
if (
tableHeadColumn[i].fixed == undefined &&
tableColumnKeys.value.includes(tableHeadColumn[i].key)
) {
isLast = false;
}
}
return isLast ? ({ "border-right": "none" } as StyleValue) : {};
}
return {} as StyleValue;
};
/**
* @remark 排除 hide
*/
@ -739,7 +782,7 @@ onBeforeUnmount(() => {
{
textAlign: column.align,
},
renderFixedStyle(column, columnIndex),
renderHeadFixedStyle(column, columnIndex, tableHeadColumn),
]"
>
<template v-if="column.type == 'checkbox'">

View File

@ -1270,25 +1270,31 @@ export default {
title:"名称",
width:"200px",
key:"username"
},{
},
{
title:"地址",
children: [
{ title: "省", key: "province", width: "300px" },
{ title: "市", key: "city", width: "300px" },
{ title: "区", key: "area", width: "300px" },
]
},{
title:"性别",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
},
{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
ellipsisTooltip: true,
children: [
{
title:"性别",
key:"sex"
},{
title:"年龄",
width: "300px",
totalRow:"统计",
key:"age"
}
]
}
]