在 vuetify 数据表中排序更改时获取当前排序选项答案

【问题标题】：Get current sort options when sort changes in vuetify data tables在 vuetify 数据表中排序更改时获取当前排序选项
【发布时间】：2020-08-24 04:22:30
【问题描述】：

我们的表格分页和排序都是在服务器上完成的，但我还是想让用户点击列标题进行排序。当排序发生变化时，我需要访问表格排序选项。看来事件是分开的

update:sort-by
update:sort-desc

我可以创建两个方法，让第一个事件设置列（排序依据）值，然后第二个方法实际触发排序。但这听起来很可怕，而且容易出现竞争条件或未来的错误。

如果排序依据也包括 desc/asc 数据会更好。我尝试为表创建一个引用，但由于某种原因，包含排序信息的属性为空。

事件 update:options 包含所有必要的信息，但它可能会因为排序以外的其他原因而触发，排序也不理想。

所以我不确定我是否在这里遗漏了什么。有没有更好的方法来做到这一点？

                                <v-data-table
ref="contractItemTable"
:headers="headers"
:items="contracts"
:disable-sort="isLoadingPage"
:server-items-length="tableTotal"
disable-pagination
hide-default-footer
@click:row="navigateToContract"
single-select
@update:sort-by="sortTable"
@update:sort-desc="sortTable"
item-key="id.id">

还有 JS

public sortTable(event) {

    console.debug(this.$refs.contractItemTable.sortBy);
    console.debug(this.$refs.contractItemTable.sortDesc);
}

无论我点击什么，sortBy 和 sortDesc 属性都是空的。如果我使用选项事件，则该事件包含正确的 sortBy 和 sortDesc。但如上所述，不完全是我想要使用的事件。我让它工作了，但我必须“忽略”初始加载选项事件，因为它不是触发此方法的有效时间。

【问题讨论】：

你能发布你的代码吗？
已更新代码。不过不确定会不会好很多。似乎对表的引用永远不会使用排序数据进行更新。它包含实际数据和其他内容。但不是那种。所以我认为这可能是图书馆的一个错误。

标签： vuetify.js

【解决方案1】：

在数据表中添加属性：

:sort-desc.sync="sort_desc"

在数据中：

sort_desc:true,//or what you need by default

在可观察中：

sort_desc:function(val,_prev){
    //do what you need to change sort and refresh
},

【讨论】：

【解决方案2】：

您大部分时间都在那儿（并且在尝试自己整理将排序应用于派生/计算的列项的最佳方法时发现了您的问题）...只需要绑定 v-data-table 排序依据和数据元素的 sort-desc 属性，以便您可以在 sortTable 函数中引用它们：

<v-data-table
    ...
    :items="contracts"
    :headers="headers"
    :sort-by.sync="sortBy"
    :sort-desc.sync="sortDesc"
    @update:sort-by="sortTable"
    @update:sort-desc="sortTable"
    ...
>

export default {
    data() {
        contracts: [],
        sortBy: 'contractDate',  // make sure this matches headers[].value
        sortDesc: false, // and both match your initial from-server sort
        ...
        headers: [
            { text: 'Contract Date', sortable: true, value: 'contractDate' },
            { text: 'Contract Value', sortable: true, value: 'contractValue' }
            ...
        ]


    },
    methods: {
        sortTable() {
            if(this.sortBy === 'contractDate') {
                this.contracts.sort( (a,b) => {
                    return ( a.contractDate > b.contractDate ? 1 : -1 ) * (this.sortDesc ? -1 : 1 );
                });
            }
            if(this.sortBy === 'contractValue') {
                this.contracts.sort( (a,b) => {
                    return ( a.contractValue > b.contractValue ? 1 : -1 ) * (this.sortDesc ? -1 : 1 );
                });
            }
            
        }
    }
}

您的排序逻辑显然会有所不同，但其中包含 Array.sort() 回调示例以显示 this.sortDesc 用于反转评估的位置。

需要注意的一个重要警告是，如果您不指定

<v-data-table :must-sort="true" >

然后绑定的 @update:sort-by 和 @update:sort-desc 事件将在排序被停用时触发，这发生在用户第三次单击同一列标题时（它循环排序到无排序状态。 )

要解决这个问题，请添加类似

sortPending: false

到您的数据状态，当事件触发时，如果 this.sortPending === true 则立即退出事件，并将您的排序逻辑移动到 Vue.nextTick() 回调中：

    methods: {
        sortTable() {
            if(this.sortPending) return;
            this.sortPending = true;
            this.$nextTick( () => {
                this.sortPending = false;
                /* your sort logic here */
            });

【讨论】：