vuetify 中复选框列未排序

Question

我正在尝试在 vuetify 数据表中创建一行复选框。 我设法做到了这一点，但排序在该列上不起作用

我创建了这个演示来演示。 演示

我使用数组作为 v-model 并使用 id 作为值，如文档中所示。我希望通过对该列进行排序，它将移动表格开头或结尾处的选中行

Answer 1

您可以使用

custom-key-sort

来实现此目的，它是 VDataTable 上的一个道具，并需要一个映射列键的对象来排序函数：

<v-data-table
  :custom-key-sort="{
    myCol: (a,b) => a - b
  }"
/>

对此有一个相当大的警告（从 Vuetify 3.5.2 开始）：排序函数不直接接收项目，而只接收由键提取的值。如果您的列键与项目上的属性不对应，则排序函数将接收两个

undefined

作为参数。

所以基本上，它在您的示例中不起作用，其中列键

select

不是属性。您必须将所选值作为项目的一部分，或者使用

id

作为列键。

这是更新的游乐场，使用

id

作为列键。