父组件
<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>