antdesignvue 默认选中第一行
时间: 2023-10-09 18:15:20 浏览: 121
Ant Design Vue 的 Table 组件默认不会选中第一行，但你可以通过编写代码实现该功能。
你需要在 Table 组件中添加 `row-selected-keys` 属性，并将其绑定到一个数组变量。然后在该数组变量中添加第一行数据的 key （如果有）。这样，当 Table 组件渲染时，第一行数据将自动被选中。
例如，假设你的数据源是一个数组 `dataSource`，你可以这样实现默认选中第一行：
```
<template>
<a-table
:columns="columns"
:data-source="dataSource"
row-key="id"
:row-selected-keys="selectedKeys"
@row-selected-keys-change="handleSelectChange"
/>
</template>
<script>
export default {
data() {
return {
dataSource: [...], // 假设这是你的数据源
selectedKeys: [], // 选中的行的 key 组成的数组
};
},
methods: {
handleSelectChange(selectedRowKeys) {
this.selectedKeys = selectedRowKeys;
},
},
created() {
if (this.dataSource.length > 0) {
this.selectedKeys.push(this.dataSource[0].id);
}
},
};
</script>
```
在上面的例子中，我们在组件的 `created` 钩子函数中判断数据源是否为空，如果不为空，则将第一行数据的 key 添加到 `selectedKeys` 数组中。这样，当组件渲染时，第一行数据就会被选中。当用户点击其他行时，`row-selected-keys-change` 事件会触发，我们可以在 `handleSelectChange` 方法中更新选中的行的 key 数组。
阅读全文
相关推荐
