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)