在 Vuetify 的数据表中固定列是可以做到的。首先,你需要在数据表的根元素上使用
fixed-header
属性。这将使表头固定在顶部,当你滚动数据表时会一直可见。
然后,你可以在数据表的列元素上使用
fixed
属性来固定列。例如:
<template>
<v-data-table :headers="headers" :items="items" fixed-header>
<template v-slot:item.name="{ item }">
<td :class="{ 'text-xs-left': !item.sticky }">{{ item.name }}</td>
</template>
<template v-slot:item.actions="{ item }">
<td :class="{ 'text-xs-right': !item.sticky }">{{ item.actions }}</td>
</template>
</v-data-table>
</template>
<script>
export default {
data () {
return {
headers: [
{ text: 'Name', value: 'name', fixed: 'left' },
{ text: 'Actions', value: 'actions', fixed: 'right' },
items: [
{ name: 'Item 1', actions: 'Actions 1' },
{ name: 'Item 2', actions: 'Actions 2' },
// ...
</script>
这将固定名称列在数据表的左侧,并固定操作列在数据表的右侧。
你还可以通过使用 sticky
属性来控制哪些列在滚动时会保持固定。例如:
<template v-slot:item.name="{ item }">
<td :class="{ 'text-xs-left': !item.sticky }" :sticky="item.sticky">{{ item.name }}</td>
</template>
这样,当你滚动数据表时,只有带有 sticky
属性的列才会保持固定。
希望这些信息对你有帮助。