VisActor / VisActor/VTable

[Bug] 切换不同的主题,表格图标不跟随切换的主题变化。

Open
#4,800 1 comment 0 reactions 0 assignees View on GitHub

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.22.3

Link to Minimal Reproduction

官网demo

// import * as ReactVTable from '@visactor/react-vtable';

const { useCallback, useRef, useState } = React;
const { ListTable } = ReactVTable;

function App() {

const tableInstance = useRef(null);
const [bol, setBol] = useState(false);
const option = {
columns: [
{
field: '类别',
tree: true,
title: '类别',
width: 'auto',
sort: true
},
{
field: '销售额',
title: '销售额',
width: 'auto',
sort: true
// tree: true,
},
{
field: '利润',
title: '利润',
width: 'auto',
sort: true
}
],
//theme: VTable.themes.BRIGHT,
records: [
{
类别: '办公用品',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '信封', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色信封',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色信封',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '器具', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '订书机',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '计算器',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '技术',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: [
{
类别: '设备', // 对应原子类别
销售额: '225.44',
数量: '5',
利润: '462.56'
},
{
类别: '配件', // 对应原子类别
销售额: '375.92',
数量: '8',
利润: '550.2'
},
{
类别: '复印机', // 对应原子类别
销售额: '425.44',
数量: '7',
利润: '342.56'
},
{
类别: '电话', // 对应原子类别
销售额: '175.92',
数量: '6',
利润: '750.2'
}
]
},
{
类别: '家具',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '桌子', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色桌子',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色桌子',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '椅子', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '老板椅',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '沙发椅',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '生活家电(懒加载)',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
}
]
};

const btn = ()=> {
setBol(pre=> !pre)
}

const ready = (instance, isInitial) => {
if (isInitial) {
tableInstance.current = instance;
}
};

return (
<>
themes
<ListTable
columns={option.columns}
records={option.records}
theme={bol? VTable.themes.DARK: VTable.themes.ARCO}
>

</>
);
}

const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render();

// release react instance, do not copy
window.customRelease = () => {
root.unmount();
};

Steps to Reproduce

1.切换不同的主题,图标不随着图标变化;
2.theme: VTable.themes.DARK/VTable.themes.ARCO;
3.如果默认ARCO主题,点击按钮,切换成DARK主题,背景色变化了,但是图标还是ARCO主题的颜色,并不是DARK主题的颜色。

Current Behavior
Image Image

// import * as ReactVTable from '@visactor/react-vtable';

const { useCallback, useRef, useState } = React;
const { ListTable } = ReactVTable;

function App() {

const tableInstance = useRef(null);
const [bol, setBol] = useState(false);
const option = {
columns: [
{
field: '类别',
tree: true,
title: '类别',
width: 'auto',
sort: true
},
{
field: '销售额',
title: '销售额',
width: 'auto',
sort: true
// tree: true,
},
{
field: '利润',
title: '利润',
width: 'auto',
sort: true
}
],
//theme: VTable.themes.BRIGHT,
records: [
{
类别: '办公用品',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '信封', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色信封',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色信封',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '器具', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '订书机',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '计算器',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '技术',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: [
{
类别: '设备', // 对应原子类别
销售额: '225.44',
数量: '5',
利润: '462.56'
},
{
类别: '配件', // 对应原子类别
销售额: '375.92',
数量: '8',
利润: '550.2'
},
{
类别: '复印机', // 对应原子类别
销售额: '425.44',
数量: '7',
利润: '342.56'
},
{
类别: '电话', // 对应原子类别
销售额: '175.92',
数量: '6',
利润: '750.2'
}
]
},
{
类别: '家具',
销售额: '129.696',
数量: '2',
利润: '-60.704',
children: [
{
类别: '桌子', // 对应原子类别
销售额: '125.44',
数量: '2',
利润: '42.56',
children: [
{
类别: '黄色桌子',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '白色桌子',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
},
{
类别: '椅子', // 对应原子类别
销售额: '1375.92',
数量: '3',
利润: '550.2',
children: [
{
类别: '老板椅',
销售额: '125.44',
数量: '2',
利润: '42.56'
},
{
类别: '沙发椅',
销售额: '1375.92',
数量: '3',
利润: '550.2'
}
]
}
]
},
{
类别: '生活家电(懒加载)',
销售额: '229.696',
数量: '20',
利润: '90.704',
children: true
}
]
};

const btn = ()=> {
setBol(pre=> !pre)
}

const ready = (instance, isInitial) => {
if (isInitial) {
tableInstance.current = instance;
}
};

return (


themes
<ListTable
columns={option.columns}
records={option.records}
theme={bol? VTable.themes.DARK: VTable.themes.ARCO}
>


);
}

const root = ReactDom.createRoot(document.getElementById(CONTAINER_ID));
root.render();

// release react instance, do not copy
window.customRelease = () => {
root.unmount();
};

Expected Behavior

期望主题切换的表格,图标也能适配不同的主题,而不是没有变化。

Environment
- OS:
- Browser:
- Framework:
Any additional comments?

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React ListTable usage in the reproduction and trace how the theme prop changes from VTable.themes.ARCO to VTable.themes.DARK. Reproduce the switch in the official demo and inspect the theme and icon rendering entry points. Done means table icons update their colors when the theme changes, while the existing table behavior remains intact.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.