【Ant Design Vue table踩坑】

rowKey

当后台返回的数据主键字段不是key时需要设置对应的主键字段

<template>
	<a-table row-key="id" :data-source="data"/>
</template>
<script lang="ts" setup>
interface DataType {
  id: string | number;
  name: string;
}
const data: DataType[] = [];
for (let i = 0; i < 46; i++) {
  data.push({
    id: i,
    name: `Edward King ${i}`,
  });
}
</script>

上面代码的数据主键为id，所以设置成了row-key=“id”

rowSelection

在setup模式下，rowSelection需要单独配置每一个字段对应的值，而不是一个大的对象，不然选择会失效

正确写法

<template>
<a-table
    :row-selection="{ 
	    selectedRowKeys: selectedRowKeys, 
	    onChange: onSelectChange 
    }"
 />
 </template>
<script lang="ts" setup>
import { ref, unref } from 'vue';
interface DataType {
  key: string | number;
  name: string;
}
const selectedRowKeys = ref<DataType['key'][]>([]); 
const onSelectChange = (changableRowKeys: string[]) => {
  console.log('selectedRowKeys changed: ', changableRowKeys);
  selectedRowKeys.value = changableRowKeys;
};
</script>

错误写法

<template>
<a-table
    :row-selection="rowSelection"
 />
</template> 
<script lang="ts" setup>
import { ref, unref } from 'vue';
interface DataType {
  key: string | number;
  name: string;
}
const selectedRowKeys = ref<DataType['key'][]>([]); 
const rowSelection = {
    selectedRowKeys: unref(selectedRowKeys),
    onChange: onSelectChange
}
const onSelectChange = (changableRowKeys: string[]) => {
  console.log('selectedRowKeys changed: ', changableRowKeys);
  selectedRowKeys.value = changableRowKeys;
};
</script>