当您使用 @cell-click 绑定一个点击单元格的事件时,它会影响当前行的高亮。这是因为在 VxeTable 中,默认情况下,点击单元格时也会将所在行设置为当前行,从而触发当前行的高亮效果。
如果您在 @cell-click 事件中修改了数据,可能会导致当前行的状态不再是高亮状态。这是因为在修改数据后,VxeTable 会重新渲染整个表格,从而丢失当前行的高亮状态。
为了解决这个问题,您可以在 @cell-click 事件中手动设置当前行的状态。具体来说,您需要:
-
通过
getCurrentRecord()方法获取当前行的数据对象。jsCopy Code methods: { handleClickCell({ $table, row }) { const currentRow = $table.getCurrentRecord(); // ... }, }, -
在数据修改后,通过
setActiveRow()方法手动将当前行设置为高亮状态。这个方法接受一个参数row,代表要设置为当前行的数据对象。jsCopy Code methods: { handleClickCell({ $table, row }) { const currentRow = $table.getCurrentRecord(); // ... 修改了数据 ... $table.setActiveRow(currentRow); }, },注意,如果当前行已经被删除或者不在当前页,则
setActiveRow()方法将不起作用。此时您需要调用setCurrentRow()方法来手动设置当前行。这个方法接受一个索引或者一个数据对象作为参数,代表要设置为当前行的行号或数据对象。jsCopy Code methods: { handleClickCell({ $table, row }) { const currentRow = $table.getCurrentRecord(); // ... 修改了数据 ... $table.setCurrentRow(currentRow); }, },
通过手动设置当前行,您可以确保在修改数据后,当前行仍然是高亮状态,从而提供更好的用户体验。