vue3配合naive-ui的虚拟表格显示超过1000条数据，并且带有单选按钮

父组件

<template>
  <div style="width: 1900px">
    <n-data-table
      :columns="columns"
      :data="data"
      max-height="100%"
      scroll-x="100%"
      virtual-scroll
    />
  </div>
</template>

<script lang="ts" setup>
import { h, ref } from "vue";
import type { DataTableColumns } from "naive-ui";
import HomeView from "./views/HomeView.vue";
interface RowData {
  key: number;
  name: string;
  age: number;
  address: string;
}
const select = ref<number>(null);
const columns = ref<DataTableColumns<RowData>>([
  {
    title: "",
    key: "radio",
    width: 200,
    render(row) {
      return h(
        HomeView,
        {
          keys: row.key,
          checked: select.value,
          onchange: () => {
            select.value = row["key"];
          },
        },
        ""
      );
    },
  },
  {
    title: "Name",
    key: "name",
    width: 200,
  },
  {
    title: "Age",
    key: "age",
    width: 100,
  },
  {
    title: "Row",
    key: "row",
    render(row, index) {
      return h("span", ["row ", index]);
    },
  },
  {
    title: "Row1",
    key: "row1",
    render(row, index) {
      return h("span", ["row ", index]);
    },
  },
  {
    title: "Row2",
    key: "row2",
    render(row, index) {
      return h("span", ["row ", index]);
    },
    width: 100,
    fixed: "right",
  },
  {
    title: "Address",
    key: "address",
    width: 200,
    fixed: "right",
  },
]);
const data = ref<RowData[]>(
  Array.from({ length: 1000 }).map((_, index) => ({
    key: index,
    name: `Edward King ${index}`,
    age: 32,
    address: `London, Park Lane no. ${index}`,
  }))
);
</script>
<style>
.radio-class {
  padding: 20px;
}
</style>

子组件：HomeView.vue

<template>
  <div>
    <n-space>
      <n-radio :checked="checkedValue === keys" :value="keys" name="basic-demo">
      </n-radio>
    </n-space>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, withDefaults, onMounted, watch } from "vue";
interface propsa {
  keys?: number;
  checked?: number;
}
const props = withDefaults(defineProps<propsa>(), {
  keys: null,
  checked: null,
});
const checkedValue = ref<number>(null);
watch(
  () => props.checked,
  () => {
    checkedValue.value = props.checked;
  }
);
onMounted(() => {
  checkedValue.value = props.checked;
});
</script>