如何在移动视图上隐藏或禁用 vuetify 3 <v-data-table> 的“排序依据”输入和标签

Question

我正在使用 vuetify

<v-data-table>

显示一些数据：

手机查看：

代码：

<v-data-table-server
    :items-per-page="itemsPerPage" 
    :headers="headers"
    :items="serverItems" 
    :items-length="totalItems" 
    :loading="loading" 
    :search="search"
    item-value="id" 
    fixed-header
    no-data-text="Sin datos"
    @update:options="loadItems" 
    items-per-page-text="autos por página" loading-text="obteniendo datos..."
>

专栏：

headers: [
    { title: 'Patente', key: 'patente', sortable: false },
    { title: 'Marca', key: 'marca', sortable: false },
    { title: 'Modelo', key: 'modelo', sortable: false },
    { title: 'Precio', key: 'precio', sortable: false },
    { title: 'Caja', key: 'caja', sortable: false },
    { title: 'Combustible', key: 'combustible', sortable: false },
    { title: 'Pasajeros', key: 'pasajeros', sortable: false },
    { title: 'Descripcion', key: 'descripcion', sortable: false },
    { title: 'Foto', key: 'fotos', sortable: false },
    { title: 'Opciones', key: 'options', sortable: false }
]

我尝试将列属性

sortable

设置为

false

但没有帮助。

Answer 1

除了CSS解决方案之外，还没有找到任何方法。

.v-data-table-headers--mobile {
  display: none;
}

或者，如果您不希望表格在移动设备上响应，您可以执行以下操作：

<v-data-table-server
...
mobile-breakpoint="0">