使用vxe-table时,当@cell-click绑定点击事件时,会影响当前行的高亮效果。

2,239 阅读1分钟

当您使用 @cell-click 绑定一个点击单元格的事件时,它会影响当前行的高亮。这是因为在 VxeTable 中,默认情况下,点击单元格时也会将所在行设置为当前行,从而触发当前行的高亮效果。

如果您在 @cell-click 事件中修改了数据,可能会导致当前行的状态不再是高亮状态。这是因为在修改数据后,VxeTable 会重新渲染整个表格,从而丢失当前行的高亮状态。

为了解决这个问题,您可以在 @cell-click 事件中手动设置当前行的状态。具体来说,您需要:

  1. 通过 getCurrentRecord() 方法获取当前行的数据对象。

    jsCopy Code
    methods: {
      handleClickCell({ $table, row }) {
        const currentRow = $table.getCurrentRecord();
        // ...
      },
    },
    
  2. 在数据修改后,通过 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);
      },
    },
    

通过手动设置当前行,您可以确保在修改数据后,当前行仍然是高亮状态,从而提供更好的用户体验。