n-data-table , 选行时自动选中单选按钮
在 Naive UI 的 n-data-table
组件中,你可以通过设置表格列的类型为 'selection' 来添加一个包含单选或复选框的列。用户可以点击这个列中的框来选择行,也可以点击行本身来选择该行。
以下是一个基本的示例:
<template>
<n-data-table
:columns="columns"
:rows="rows"
row-key="name"
v-model:checked-row-keys="checkedRowKeys">
</n-data-table>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const columns = [
{
type: 'selection',
},
// other columns...
];
const rows = [
{ name: 'John Doe' },
// other rows...
];
const checkedRowKeys = ref([]);
return {
columns,
rows,
checkedRowKeys,
};
},
};
</script>
在这个例子中,我们添加了一个类型为 'selection' 的列,这会在每行前面添加一个复选框。用户可以点击这个复选框或者点击行本身来选择该行。被选中的行的键值将被自动添加到 checkedRowKeys
数组中。
请注意:具体的代码可能需要根据你自己的需求进行修改。这只是一个基础示例,实际的 Vue 应用可能更复杂。如果这段代码不能正常工作,你可能需要查阅你正在使用的 Naive UI 版本的官方文档。