如何在移动端隐藏/禁用Vuetify 3 <v-data-table>的排序输入与标签

你已经将所有列的sortable设为false，但移动端仍显示排序相关输入框和标签，这是因为仅设置列的sortable不会完全禁用组件的排序UI，需要额外配置组件属性：

方案1：直接禁用排序功能 #

在<v-data-table-server>标签中添加disable-sort属性，彻底关闭组件的所有排序相关UI：

<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..."
    disable-sort <!-- 添加这个属性 -->
>

方案2：初始化空排序状态 #

如果需要保留排序逻辑但隐藏UI，可以通过绑定options属性初始化排序为空数组：

<v-data-table-server
    <!-- 其他属性不变 -->
    :options="{ sortBy: [], sortDesc: [] }"
>

同时确保你的loadItems方法在处理options时，忽略排序相关参数（如果不需要排序功能的话）。

额外检查 #

如果以上方法无效，确认是否存在自定义的表头模板（如v-slot:header），若有则需要在模板中手动隐藏排序相关元素。

内容的提问来源于stack exchange，提问作者M.Roman