vxe-table 的 checkbox复选框

vxe-table 的 checkbox复选框

onSelectChange勾选方法

勾选三行

@checkbox-change 事件回调参数selected

selected.record是勾选的全部数据，selected.row是最后点击的行数据

selected.record

selected.row

saleReturnTableRef.value是什么？

vxeTableRef.value 是 vxe-table 组件的实例对象，不是普通的方法。它里面包含了很多 vxe-table 提供的方法和属性。

从代码中看到的用法

onSelectChange: (selected) => {

    const $table = saleReturnTableRef.value;

    const records = $table.getCheckboxRecords();
    
    // ...

}

常见的 vxe-table 实例方法

方法名	作用
getCheckboxRecords()	获取所有选中的行数据（多选）
getRadioRecord()	获取单选的行数据
getCurrentRecord()	获取当前行数据
loadData(data)	加载数据
reloadData(data)	重新加载数据
refreshData()	刷新数据
clearCheckboxRow()	清空多选选中状态
setCheckboxRow(rows, checked)	设置多选选中状态
scrollToRow(row)	滚动到指定行

通俗理解

// saleReturnTableRef 是 Vue 的 ref 对象
const saleReturnTableRef = ref(null);

// .value 才是实际的 vxe-table 组件实例
const tableInstance = saleReturnTableRef.value;

// 通过实例调用 vxe-table 提供的方法
const selectedData = tableInstance.getCheckboxRecords();

简单说：.value 是 Vue 3 ref 的"拆包"操作，拿到的是 vxe-table 组件的完整实例，里面有很多内置方法可以操作表格。

区

两种方式对比

方式	代码	适用场景
事件参数	selected.records	只在 @checkbox-change 事件回调中使用
实例方法	$table.getCheckboxRecords()	任何地方都能调用

实际代码中的等价写法

// 当前写法（用实例方法）

onSelectChange: (selected) => {

const $table = saleReturnTableRef.value;

const records = $table.getCheckboxRecords();

// ...

}

// 也可以直接用 selected 参数（更简洁）

onSelectChange: (selected) => {

const records = selected.records; // 效果一样

// ...

}

什么时候必须用实例方法？

当你在事件回调外面需要获取选中行时，只能用实例方法：

// 在其他方法中获取选中状态

const someOtherMethod = () => {

const $table = saleReturnTableRef.value;

const records = $table.getCheckboxRecords(); // ✅ 可以

// selected.records 这里拿不到，因为不在事件回调里

};

建议

在 onSelectChange 回调内部，两种方式效果一样，用 selected.records 更简洁：

onSelectChange: (selected) => {

saleReturnTableConfig.selectedRows = selected.records;

saleReturnTableConfig.selectedRowKeys = selected.records.map(r => r.id);

},