VueJS使用TableLite组件如何获取所有选中行的记录？

架构老林

2026-7-9

解决vue3-table-lite获取选中记录ID的问题

问题说明

你绑定的@return-checked-rows事件实际会返回选中的行对象数组，而非数量。当前看到的"数量"大概率是误将数组的length当成了返回值，或是组件未正确识别行唯一标识导致返回异常。

解决方案步骤

1. 给表格组件添加行唯一标识

在TableLite标签中新增:row-key属性，指定每行的唯一ID字段，确保组件能正确追踪选中行：

<TableLite
    :has-checkbox="true"
    :is-slot-mode="true"
    :row-key="row => row.id" <!-- 新增：指定行唯一标识 -->
    :is-loading="table.isLoading"
    :columns="table.columns"
    :rows="table.rows"
    <!-- 其他原有属性保持不变 -->
>
</TableLite>

2. 修改事件处理方法，提取选中ID

更新updateCheckedRows方法，直接接收选中的行数组，从中提取所需的ID：

updateCheckedRows(checkedRows) {
  // 打印完整选中行（可选）
  console.log('选中的记录：', checkedRows);
  // 提取ID数组并保存
  this.campaignIds = checkedRows.map(row => row.id);
  console.log('选中的ID列表：', this.campaignIds);
}

3. 跨页选中的额外配置（可选）

如果需要支持跨页保留选中状态并获取所有页的选中行，给TableLite添加:keep-checked-rows="true"属性：

<TableLite
    :has-checkbox="true"
    :is-slot-mode="true"
    :row-key="row => row.id"
    :keep-checked-rows="true" <!-- 新增：跨页保留选中 -->
    <!-- 其他属性 -->
>
</TableLite>