【14.2.2】tab下的两个表单，切换后表单列名被替换

Clark.Pan

<Tabs
className="tab-content"
defaultActiveKey={activeIndex}
onChange={(key) => setActiveIndex(key)}
type="card"
animated
>
{tabs.map((x, index) => (
<Tabs.TabPane tab={x.name} key={index + 1} className="height100">
<ExcelSheet sheetName={x.sheetName} spreadSheets={{}}></ExcelSheet>
</Tabs.TabPane>
))}
</Tabs>

复制代码

const workbookInitialized = (spread: GC.Spread.Sheets.Workbook) => {
console.log("初始化");
setSpread(spread);
setSheet(spread?.getActiveSheet());
};
useEffect(() => {
console.log(props);
}, []);
useEffect(() => {
const { sheetName } = props;
column.forEach((x) => {
x.displayName = x.displayName.replace(/（.*?）/g, `（${sheetName}）`);
});
sheet?.bindColumns(column);
sheet?.setDataSource(JSON.parse(JSON.stringify(spreadData)));
}, [sheet]);

复制代码

Q：tab下的两个表单，分别显示不一样的表头，切换tab后，前一个表单的列名会被后面表单的列名替换掉：1、默认加载数据，表头是对应上的：
image.png675941772.png

2、然后点击页签二，表头也是对应上的：
image.png38309020.png

3、再切换回页签一，页签一下面的表单变量值名被替换成页签二下面的变量值了：
image.png857095336.png

ps：我认为这是两个独立的组件，sheet对象也是不一样的，页签二表格生成时，调用自己绑定列方法是不应该影响前一个组件的，但是事实并没有。

https://github.com/vivianus-chan/react-demo.git

Clark.Pan · Clark.Pan

本帖最后由 Clark.Pan 于 2021-12-3 12:18 编辑

看了demo,应该是您理解错了，您用ExcelSheet做了一个组件，在SpreadDemo中切换tab来调取组件。但是在组件中 image.png198374327.png

这里初始化的spread和sheet对象，但上图所示只有一个worksheet标签意味着进静态生成了一个sheet对象，无论怎么切换都是同一个sheet对象，后续操作sheetName仅仅是给该sheet对象换了一个名字而已。所以不奇怪为什么会切换后显示同样的数据。建议如果您要做到点击tab切换两个sheet,要么是在ExcelSheet组件中开始就在dom上初始化好两个Worksheet然后用tab去进行切换。将组件的spread对象返回到父页面中调用，在切换时在父页面通过spread对象进行动态创建sheet。

大Vi · 大Vi

Clark.Pan 发表于 2021-12-3 12:13
看了demo,应该是您理解错了，您用ExcelSheet做了一个组件，在SpreadDemo中切换tab来调取组件。但是在组件中 ...

有没有其他解决办法，项目中比这情况复杂的多，不好改。我想就目前的代码结构找找能怎么做改动最小？

Clark.Pan · Clark.Pan

上述就是解决办法，没有其他方式了。

		自动登录	找回密码
密码			立即注册

[已处理] 【14.2.2】tab下的两个表单，切换后表单列名被替换

最佳答案

3 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄