Vuetify.js v-data-table 排序只有 2 个状态（asc & desc）

【问题标题】：Vuetify.js v-data-table sorting with only 2 states (asc & desc)Vuetify.js v-data-table 排序只有 2 个状态（asc & desc）
【发布时间】：2021-11-25 20:40:34
【问题描述】：

使用 Vuetify.js，我有一个自定义排序的 v-data-table。可点击的标题排序图标支持 3 种状态：1）升序（箭头图标），2）降序（箭头图标相反方向）和“无排序”（箭头图标变灰）。如何摆脱“无排序”选项并仅强制升序或降序作为支持的状态或操作？

【问题讨论】：

标签： sorting vuetify.js

【解决方案1】：

如果你只想禁用“无排序”状态，可以使用 must-sort 属性。

但是这个道具不会为你设置一个 initial 排序。默认情况下，列仍将未排序。要限制这一点，您需要定义 sort-by 和 sort-desc 属性。您还可以使用 multi-sort 属性显示排序编号徽章。

所以答案是：要允许初始“无排序”状态，使用以下代码：

<v-data-table
  ...
  must-sort
></v-data-table>

而要限制初始“无排序”状态，使用以下代码：

<v-data-table
  ...
  must-sort
  multi-sort
  :sort-by="['calories', 'fat', 'carbs', 'protein', 'iron']"
  :sort-desc="[false, true, false, false, false]"
></v-data-table>

Codepen with working example

【讨论】：