javascript - Vuetify3 v-data-table-virtual 禁用排序设置不生效？

Question

vuetify3的v-data-table-virtual表格中的表头如何禁用排序？

以下是目前的代码

<v-data-table-virtual                        :headers="headers"                        :items="dataResult"                      >                        <template v-slot:item.expense="{item}">                          {{ item.expense }}                          <span style="color: red" v-if="item.isLargeRepair"                            >(修繕含)</span                          >                        </template>                      </v-data-table-virtual>script：headers: [            {              title: '',              key: 'time',              sortable:false,            },            {              title: '年間収入',              key: 'income'            },            {              title: '年間支出',              key: 'expense'            },            {              title: 'CF',              key: 'cashFlow'            },            {              title: '累計CF',              key: 'cumulativeCashFlow'            },            {              title: '最終売却損益',              key: 'lastFlow'            }          ],

根据官方给出的文档，我把sortable设成false。但是实际上表头还是能排序，可能是哪里出了问题吗？

顺带一个问题，为什么文档里给出的说明都写着readonly？这个属性不应该是可以写的吗。以下官方文档的片段。

  readonly sortable?: boolean | undefined  readonly sort?: DataTableCompareFunction<any> | undefined  readonly sortRaw?: DataTableCompareFunction<any> | undefined  readonly filter?: FilterFunction | undefined

vuetify table的链接：https://vuetifyjs.com/zh-Hans/api/v-data-table-virtual/#props

Answer 1

你需要为每一列设置 sortable: false：

const headers = [  {    title: '时间',    key: 'time',    sortable: false,  },  {    title: '年間収入',    key: 'income',    sortable: false,  },  {    title: '年間支出',    key: 'expense',    sortable: false,  },  {    title: 'CF',    key: 'cashFlow',    sortable: false,  },  {    title: '累計CF',    key: 'cumulativeCashFlow',    sortable: false,  },  {    title: '最終売却損益',    key: 'lastFlow',    sortable: false,  },]

文档中的 readonly 表示 vuetify 认为这些属性是只读的，即组件内部不会修改他们，但是你仍然可以在外部修改这些属性：

setInterval(() => {    headers.value[0].sortable = !headers.value[0].sortable}, 3000)

Answer 2

你的代码看起来应该是正确的，Vuetify 的 v-data-table-virtual 组件的 headers 属性中的 sortable 属性应该能够用来控制每一列的排序。在你的代码中，你已经将 time 列的 sortable 属性设置为 false，这意味着该列应该不能排序。

然而，如果排序仍然生效，可能的原因有几个：

1. 可能是你的 Vuetify 版本有问题，你可能需要升级或降级你的 Vuetify 版本。
2. 你可能在其它地方对表格进行了排序操作，例如，你可能在 v-data-table-virtual 组件上使用了 @sort-change 事件并手动改变了排序。
3. 你的数据可能已经在获取时就已经排序了，因此即使你在 headers 中将 sortable 设置为 false，表格显示的还是排序后的数据。

至于你的第二个问题，Vuetify 文档中的 readonly 指的是这些属性是只读的，也就是说，你不能在运行时改变这些属性的值。这些属性在组件创建时就已经确定，并且不能再被改变。然而，这并不意味着你不能在组件的初始化阶段设置这些属性的值。在你的代码中，你应该能够在 headers 中设置 sortable、sort、sortRaw 和 filter 的值。

我建议你检查一下上述可能的问题，如果还不能解决，你可能需要更详细地查看你的代码，或者尝试在 Vuetify 的社区或官方论坛中寻求帮助。