🐛(component): 修复 table 组件复杂表头存在多个时, 部分表头边框无法正常显示
This commit is contained in:
parent
a062e58312
commit
11eada1d9d
@ -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'">
|
||||
|
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user