Vxe Table表格默认选中
时间: 2024-09-06 21:04:39 浏览: 91
vxe-grid加载页面默认表格选中第一行高亮.vue
VxeTable是一个Vue.js的数据表格组件库,它提供了一种方便的方式来创建动态的、交互式的表格。如果要在VxeTable中设置默认选中项,你可以通过`v-model`绑定一个数组,并在数组中包含你要预选中的数据的唯一标识或者整个对象。
例如,假设你有一个用户列表,你可以这样做:
```html
<template>
<vxe-table
:data="tableData"
:row-key="getRowKey" // 需要设置row-key属性,因为默认没有id字段
@selection-change="handleSelectionChange"
>
<!-- ... -->
</vxe-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'User1' },
{ id: 2, name: 'User2' },
{ id: 3, name: 'User3' }
],
selectedIds: [1] // 这里是预选中的用户id,可以换成整个对象
};
},
methods: {
handleSelectionChange(selection) {
this.selectedItems = selection.map(item => this.tableData.find(data => data.id === item)); // 将ids转换回对象
},
getRowKey(row) {
return row.id; // 返回每个行的唯一标识
}
}
};
</script>
```
在这个例子中,当用户首次加载页面时,ID为1的用户会被默认选中。你可以根据需要调整`selectedIds`的值。
阅读全文