Vue.js 复选框列未在vutify中排序

发布于02月08日

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

我制作这个演示是为了演示.Demo个

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

推荐答案

为此，您可以使用custom-key-sort，它是VDataTable上的一个props ，需要一个映射列键的对象来对函数进行排序:

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

这里有一个相当大的警告(从Vuetify 3.5.2开始):sort函数不直接接收项目，而只接收键提取的值.如果你的列键不对应于项目的属性，排序函数将接收两个undefined作为参数.

因此，基本上，它在您的示例中不起作用，其中列键select不是属性.您必须将所选值作为项目的一部分，或者使用id作为列键.

下面是使用id作为列键的updated playground个.

顺便说一句.看起来你做了很多事情来获得自定义行悬停.考虑使用一个css类来简化事情(参见playground).

实用课程推荐