🐛(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) => {
|
const renderFixedStyle = (column: any, columnIndex: number) => {
|
||||||
if (column.fixed) {
|
if (column.fixed) {
|
||||||
if (column.fixed == "left") {
|
if (column.fixed == "left") {
|
||||||
@ -563,6 +561,51 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
|
|||||||
return {} as StyleValue;
|
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 列
|
* @remark 排除 hide 列
|
||||||
*/
|
*/
|
||||||
@ -739,7 +782,7 @@ onBeforeUnmount(() => {
|
|||||||
{
|
{
|
||||||
textAlign: column.align,
|
textAlign: column.align,
|
||||||
},
|
},
|
||||||
renderFixedStyle(column, columnIndex),
|
renderHeadFixedStyle(column, columnIndex, tableHeadColumn),
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<template v-if="column.type == 'checkbox'">
|
<template v-if="column.type == 'checkbox'">
|
||||||
|
@ -1270,25 +1270,31 @@ export default {
|
|||||||
title:"名称",
|
title:"名称",
|
||||||
width:"200px",
|
width:"200px",
|
||||||
key:"username"
|
key:"username"
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
title:"地址",
|
title:"地址",
|
||||||
children: [
|
children: [
|
||||||
{ title: "省", key: "province", width: "300px" },
|
{ title: "省", key: "province", width: "300px" },
|
||||||
{ title: "市", key: "city", width: "300px" },
|
{ title: "市", key: "city", width: "300px" },
|
||||||
{ title: "区", key: "area", width: "300px" },
|
{ title: "区", key: "area", width: "300px" },
|
||||||
]
|
]
|
||||||
},{
|
},
|
||||||
title:"性别",
|
{
|
||||||
key:"sex"
|
|
||||||
},{
|
|
||||||
title:"年龄",
|
|
||||||
width: "300px",
|
|
||||||
key:"age"
|
|
||||||
},{
|
|
||||||
title:"备注",
|
title:"备注",
|
||||||
width: "180px",
|
width: "180px",
|
||||||
key:"remark",
|
key:"remark",
|
||||||
ellipsisTooltip: true
|
ellipsisTooltip: true,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
title:"性别",
|
||||||
|
key:"sex"
|
||||||
|
},{
|
||||||
|
title:"年龄",
|
||||||
|
width: "300px",
|
||||||
|
totalRow:"统计",
|
||||||
|
key:"age"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user