Nuxt3中Shadcn+Tanstack Table如何默认选中所有复选框？

针对你的需求，有两种可靠的实现方式，同时保留表头复选框的全选/取消功能：

方案一：初始化时直接设置默认选中（同步数据场景） #

在创建Tanstack Table实例时，通过state.rowSelection预先将所有行设为选中状态：

const table = createTable({
  columns: [/* 你的列定义，包括select列 */],
  data: 你的数据源,
  state: {
    // 将所有行的ID映射为true，实现默认全选
    rowSelection: Object.fromEntries(你的数据源.map(row => [row.id, true])),
  },
})

这种方式适合数据源是同步加载的情况，表格初始化时就会自动选中所有行，表头复选框也会同步显示为"全选"状态。

方案二：异步数据加载后触发全选（异步数据场景） #

如果你的数据是异步获取的，可通过监听数据变化，在数据加载完成后调用table.toggleAllRowsSelected(true)：

假设你用的是Vue3，可在组件中添加监听逻辑：

// 假设你的表格实例存在ref中，数据源也存在ref中
const table = ref(null)
const tableData = ref([])

// 监听数据源变化，数据加载完成后触发全选
watch(tableData, (newData) => {
  if (newData.length > 0 && table.value) {
    table.value.toggleAllRowsSelected(true)
  }
}, { immediate: true })

另外注意你代码中的一处语法错误：cell回调的onUpdate:checked里多了一段无效代码row.original.meter)，需要删除，修正后的代码如下：

cell: ({ table, row }) => h(Checkbox, {
  'checked': row.getIsSelected(),
  'onUpdate:checked': (value) => {
    row.toggleSelected(!!value)
  },
  'ariaLabel': 'Select row',
}),

内容的提问来源于stack exchange，提问作者cony