Vuetify-如何重置v-datatable中的排序

Question

我需要在表中创建一个按钮，单击该按钮后，我需要重置v-datatable的任何列中应用的所有排序。

我正在使用头配置数组为数据表中的一列设置可排序性。

headers = [
{
text: 'Name'
sortable: true,
value: 'name',
},

text: 'Age'
sortable: false,
value: 'number',
},
];

尝试搜索api以重置此处应用的排序，但找不到任何方法。

编辑：

PS：我不需要在加载时对表进行排序，它应该只在用户单击可排序列时对进行排序，并且应该在单击外部按钮时重置排序。

参考Js报价：https://jsfiddle.net/9sydvo7g/12/

感谢任何帮助，谢谢

Answer 1

您可以配置v-data-table，以便从外部控制排序。请参阅Vuetify文档中的外部排序示例：https://vuetifyjs.com/en/components/data-tables/#external-分拣

基本上，排序可以通过使用单独的道具或使用选项道具进行外部控制。请记住，必须应用.sync修饰符。

<v-data-table
:headers="headers"
:items="desserts"
:sort-by.sync="sortBy"
:sort-desc.sync="sortDesc"
class="elevation-1"
></v-data-table>

通过这种方式，您可以将排序配置链接到数据数组中的那些变量，如果启用了multi-sort道具，它们将作为数组工作。

data () {
return {
sortBy: 'fat',
sortDesc: false,
...
}
}

然后，如果您想从外部按钮中清除排序，您所需要做的就是将这些变量设置为''或[](如果使用multi-sort(。

methods: {
clearSort () {
this.sortBy = ''
this.sortDesc = false
// Or if you are using multi-sort
//this.sortBy = []
//this.sortDesc = []
},
...
}