vuetify 表格默认选中指定行
时间: 2024-12-15 09:24:41 浏览: 2
Vuetify是一个用于Vue.js的现代化UI组件库,它提供了一个名为`v-data-table`的表格组件,可以方便地展示数据。如果你想在默认情况下选择表格中的某一行,你可以通过设置`items`属性并将其作为数组的最后一个元素来实现预选中。这个元素应该包含所有列的数据,并且有一个特殊的标志(比如`selected`或`active`)来标记已选状态。
例如:
```html
<template>
<v-data-table :items="items" :headers="headers">
<!-- ...其他列定义... -->
<template slot="select" slot-scope="{ on }">
<v-checkbox v-model="selectedItem" @change="itemSelected" />
</template>
</v-data-table>
</template>
<script>
export default {
data() {
return {
items: [
{ /* 数据项1 */ selected: true },
{ /* 数据项2 */ selected: false },
// ...
],
selectedItem: null,
headers: [
{ text: 'Select', value: 'selected', align: 'center', sortable: false },
/* 其他列 */
]
};
},
methods: {
itemSelected(event) {
this.items.forEach(item => item.selected = event);
}
}
};
</script>
```
在这个例子中,当你在表头的复选框上点击时,`itemSelected`方法会被触发,更新`items`数组中每个元素的`selected`属性,从而达到默认选中指定行的效果。
阅读全文