Vuetify.js v-只有两个状态的数据表排序(asc & desc)

Question

使用Vuetify.js，我有一个具有自定义排序的v数据表。可点击的标题排序图标支持3种状态: 1)上升(箭头图标)，2)下降(箭头图标相反的方向)和"no排序“(箭头图标灰暗)。我如何摆脱“无排序”选项，并强制只作为支持的状态或行为的升序或降序？

Answer 1

如果您只想禁用“无排序”状态，则可以使用必须排序的支柱。

但是这个道具不会为您设置初始排序。默认情况下，列仍未排序。要限制这一点，您需要定义排序-by和sort-desc道具。您还可以显示一个排序号码徽章，然后使用多排序道具。

因此，答案是:要允许初始的“无排序”状态，请使用以下代码：

<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>

用实例说明