Vuetify DataTable设置sortable:false无效，全列仍可排序求助

当你通过headers设置sortable:false但所有列仍可排序时，大概率是:options.sync或@update:options的逻辑干扰了header的排序配置，或者存在其他强制排序的逻辑，你可以按以下步骤排查修复：

• 检查filter_values的初始值与更新逻辑
  确认filter_values对象中没有提前设置sortBy为那些标记了sortable:false的列（比如"checkbox"或"clientInformation"），同时在updateFilterValues()方法里，不要修改或重置headers的sortable属性，也不要强制给不可排序列添加排序规则。

• 添加表头点击事件手动拦截
  如果上述检查没问题，你可以通过监听数据表的@click:header事件，手动阻止不可排序列的排序行为：

<v-data-table
  :headers="headers"
  :items="yourItemsData"
  :options.sync="filter_values"
  @update:options="updateFilterValues"
  @click:header="handleHeaderClick"
></v-data-table>

对应的方法实现（以Vue3为例）：

const handleHeaderClick = (header) => {
  // 若当前列不可排序，直接阻止默认排序行为
  if (!header.sortable) return false
}

• 确保headers是响应式的
  如果你使用的是Vue3，要确保headers是用ref或reactive声明的响应式对象；Vue2则要把headers放在data选项中，避免因为非响应式导致配置不生效。

举个完整的响应式headers示例（Vue3）：

import { ref } from 'vue'

const headers = ref([
  {
    value: "checkbox",
    sortable: false,
    width: '10%'
  },
  {
    value: "userId",
    sortable: true,
    width: '30%'
  },
  {
    value: "clientId",
    sortable: true,
    width: '30%'
  },
  {
    value: "clientInformation",
    sortable: false,
    width: '30%',
  },
])

内容的提问来源于stack exchange，提问作者Alex Garcia