VxeGRid树形表格编辑难点

顾名思远义2025-04-12 15:13

引言

在多级BOM的情况下，会有键盘导航+编辑的需求。此时的你把VxeGrid文档中的单元格编辑按键操作和树形懒加载组件的代码组合一起，效果如下。

功能展示

切记给editConfig加上autoClear。

当点击表格之外或者非编辑列之后，是否自动清除单元格的激活状态

此时没任何问题，可以正常导航和编辑。

但展开树形图时，在进行导航编辑.你会发现会有两个高亮，及父表格和子表格。效果如下

解析

回想下之前提及的那个API:autoClear.只有在表格外或非编辑列才会清除Active状态。既然是展开行，所以肯定是在同一个表格内，所以才会导致出现这个情况。

既然找到问题点了，那思路就是点击内部表格时，清除外部表格的Active.

我使用的相关api:

js 复制代码

cell-selected: 只对 mouse-config.selected 配置时有效，单元格被选中时会触发该事件 

 /**
   * 用于 mouse-config.selected，获取选中的单元格信息
   */
  getSelectedCell(): {
    row: D
    column: VxeTableDefines.ColumnInfo<D>
  }
  
   /**
   * 手动清除单元格选中状态
   */
  clearSelected(): Promise<any>

代码如下

js 复制代码

const tableRef = ref<VxeGridInstance | null>(null)

const handleExpandedTableCellSelected = async () => {
  // getSelectedCell获取外部table的选中cell，再在内部取消外部table的选中
  const $grid = tableRef.value
  const selectedCell = $grid?.getSelectedCell()
  // console.log('外部table selectedCell', selectedCell)
  //如果内部table有选中cell，则取消外部table的选中
  if (selectedCell) {
    await $grid?.clearSelected()
  }
}

<vxe-grid
    ref="expandGridRef"
    @cell-selected="handleExpandedTableCellSelected"    
>