[Bug] 自定义表格边框线时,无法绘制底部线
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 3.7k
- Forks
- 486
- Avg merge
- 1d 19h
- Merged PRs (30d)
- 16
Description
Version
1.18.3
Link to Minimal Reproduction
https://www.visactor.io/vtable/demo/table-type/list-table
Steps to Reproduce
以官网基本表格为例
https://www.visactor.io/vtable/demo/table-type/list-table
将下面代码复制到官方 demo 中即可复现
let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
.then(res => res.json())
.then(data => {
const columns = [
{
field: 'Order ID',
title: 'Order ID',
width: 'auto'
},
{
field: 'Customer ID',
title: 'Customer ID',
width: 'auto'
},
{
field: 'Product Name',
title: 'Product Name',
width: 'auto'
},
{
field: 'Category',
title: 'Category',
width: 'auto'
},
{
field: 'Sub-Category',
title: 'Sub-Category',
width: 'auto'
},
{
field: 'Region',
title: 'Region',
width: 'auto'
},
{
field: 'City',
title: 'City',
width: 'auto'
},
{
field: 'Order Date',
title: 'Order Date',
width: 'auto'
},
{
field: 'Quantity',
title: 'Quantity',
width: 'auto'
},
{
field: 'Sales',
title: 'Sales',
width: 'auto'
},
{
field: 'Profit',
title: 'Profit',
width: 'auto'
}
];
let selected = 'CA-2015-103800';
const option = {
records: data,
columns,
widthMode: 'standard',
select: {
highlightMode: 'row',
disableHeaderSelect: true,
headerSelectMode: 'body',
makeSelectCellVisible: false,
},
theme: VTable.themes.DEFAULT.extends({
headerStyle: {
borderLineWidth: 0,
},
bodyStyle: {
borderColor(info) {
const { table, row, col } = info
const record = table.getRecordByCell(col, row);
if (record['Order ID'] === selected) {
return '#3583f8';
}
},
borderLineWidth(info) {
const { table, row, col } = info
const record = table.getRecordByCell(col, row);
if (record['Order ID'] === selected) {
if (!col) {
return [1, 0, 1, 1]
}
if (col === columns.length - 1) {
return [1, 1, 1, 0]
}
return [1, 0]
}
return 0
}
},
frameStyle: {
borderLineWidth: 0
},
selectionStyle: {
// cellBorderColor: '#3583f8',
cellBgColor: '#dee6fa',
inlineRowBgColor: '#dee6fa',
selectionFillMode: 'replace',
cellBorderLineWidth: 0
},
})
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID), option);
window['tableInstance'] = tableInstance;
});
Current Behavior
无法绘制底部线
Expected Behavior
希望能够正确绘制表格线
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked list-table demo and reproduce the issue using the supplied theme configuration, focusing on bodyStyle borderColor and borderLineWidth. Trace the table rendering path that handles the bottom edge of a selected row and verify the result against the expected complete border.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100