Antd vue 中的 table rowSelection行无法选中

Antd vue table

Table 表格

<a-table
    :row-selection="rowSelection"
	rowKey="id"
	:loading="loadingRef"
	:columns="columns"
	:data-source="dataListRef"
	:pagination="pagination"
	@change="onChange"
	:size="size"
	:scroll="{ x: 1900, y: height }"
 >
</a-table>

这样绑定reactive的属性，无法勾选

const config = reactive({
	keys: []
})
const rowSelection = {
    selectedRowKeys: config.keys,
  	onChange: (selectedRowKeys, selectedRows) => {
    config.keys = selectedRowKeys
    console.log(config.keys, 'config')
  }
 }

没研究明白为啥不行，但是解决办法有很多

方法1：rowSelection改为computed:

const rowSelection = computed(() => {
  return  {
    selectedRowKeys: config.keys,
  onChange: (selectedRowKeys, selectedRows) => {
    config.keys = selectedRowKeys
  }
  }
})

方法2：把rowSelection对象直接写在template里

<a-table
    :row-selection=" {
    	selectedRowKeys: config.keys,
  		onChange:handleSelectChange
  	}"
	rowKey="id"
	:loading="loadingRef"
	:columns="columns"
	:data-source="dataListRef"
	:pagination="pagination"
	@change="onChange"
	:size="size"
	:scroll="{ x: 1900, y: height }"
>
</a-table>


const handleSelectChange = (selectedRowKeys, selectedRows) => {
    config.keys = selectedRowKeys
 }

方法3：使用ref绑定selectedRowKeys的值

const keys = ref()
const rowSelection = {
    selectedRowKeys: keys, //注意：这里用keys，而不是keys.value
  	onChange: (selectedRowKeys, selectedRows) => {
   		keys.value = selectedRowKeys
    }
}