Nuxt3 Tanstack 表如何将复选框默认值设置为选中？

Question

我现在使用 shadcn 数据表和 Tanstack 表。

我在第一列上有一个复选框，但我对如何默认选中所有复选框感到困惑。 并且在单击标题上的复选框时还必须选择/取消选择，因此

defaultChecked

属性在这种情况下可能不起作用。

这是我的复选框列定义：

{
        id: 'select',
        header: ({ table }) => {
            dataTable.value = table
            return h(Checkbox, {
                'checked': table.getIsAllRowsSelected() || (table.getIsSomeRowsSelected() && 'indeterminate'),
                'onUpdate:checked': (value) => {
                    table.toggleAllRowsSelected(!!value)
                },
                'ariaLabel': 'Select all',

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

是否有一个钩子，我可以调用

table.toggleAllRowsSelected()

来选择全部，或者我怎样才能完成这项工作？

谢谢！

Answer 1

我想分享一下我最终是如何解决这个问题的。可能有更好的解决方案。

数据表.vue

defineExpose({
  table,
})

父页面.vue

//template
<DataTable ref="dataTable" :columns="columns" :data="list ?? []" ></DataTable>


// script

const dataTable = ref(null) // tanstack table

watch(dataTable, () => {
    // select all when loaded
    dataTable.value?.table?.toggleAllRowsSelected(true)
})