vuetify data table fixed column

在 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 属性的列才会保持固定。

希望这些信息对你有帮助。

  •