antdesignvue 默认选中第一行
时间: 2023-10-09 20:15:20 浏览: 41
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 数组。