图表按索引删除列功能异常:选中列与实际删除列不一致
问题根源
你的代码存在两个核心错误导致删除逻辑异常:
- 更新单元格列索引的代码错误使用了相等判断符
==,而非赋值符=,删除列后剩余单元格的colIndex完全没有更新,始终保留删除前的旧值 - 后续删除操作时,传入的
selectedColIndex是当前显示的列的顺序索引,和未更新的旧colIndex已经不匹配,最终删除的列和选中目标不一致
修复后代码
onDeleteColumnByIndex(selectedColIndex: number) { this.element.rows.forEach(row => { row.columns = row.columns.filter(o => o.colIndex != selectedColIndex); // 把相等判断改为赋值,更新剩余单元格的列索引 row.columns.forEach((cell, index) => cell.colIndex = index); }); this.element.col--; // 以下代码用于调整表格尺寸,可忽略 ==>>>> this.element.ReCalculateCellSize(); }
效果验证
以你举例的场景验证:原有1、2、3共3列,对应colIndex依次为0、1、2
- 首次删除第1列(传入
selectedColIndex=0):过滤后剩余colIndex为1、2的两列,赋值后两列的colIndex被更新为0、1,和当前显示的2、3列顺序完全对应 - 后续选中当前显示的第2列(原第3列)执行删除,传入
selectedColIndex=1,会正确匹配到对应列完成删除,不会出现误删情况
内容的提问来源于stack exchange,提问作者Cem Özbey
相关产品推荐
相关产品推荐

