如何在 antd 表組件上設置默認排序器和過濾器？

Question

我正在使用 ant-design react 組件來制作儀表板，並使用了一個表格組件<\/a>，我可以在其中定義填充數據后過濾器和排序器的方式。

如果有一個要求，我想在ID<\/code>列和環境列中應用默認排序（降序），我希望默認選擇prod<\/code> （默認情況下僅顯示 prod 警報）。 由於我不能在 ant-design 網站上詢問使用問題<\/a>，我想知道是否有人知道它並可以幫助我。 如果您可以分享，我願意采用不同的方法。

function onChange(pagination, filters, sorter) {
    console.log('params', pagination, filters, sorter);

    let order_by = sorter.field;
    if (sorter.order == 'descend'){
        order_by = `-${order_by}`;
        console.log(order_by);
    }

    let offset = ((pagination.current - 1) * pagination.pageSize);
    let url = `${baseUrl}&offset=${offset}&ordering=${order_by}`;
    this.fetchResults(url);
}

Answer 1

您可以傳遞默認的sortOrder值：這可以是ascend ， descend或false ； 這樣您就可以設置默認的排序順序。

https://ant.design/components/table/#Column

就默認過濾器而言，您需要按照@Panther上面提到的那樣設置filteredValue屬性。

Answer 2

像defaultSortOrder一樣使用defaultSortOrder defaultSortOrder: 'descend'

Answer 3

您可以使用defaultFilteredValue<\/code>設置默認過濾器值。 給出要顯示為字符串數組的值。

例如：

{
      title: 'STATUS',
      dataIndex: 'status',
      key: 'status',
      filters: createFilterArray(status),
      defaultFilteredValue : ['Open'], 
      onFilter: (value, filters) => filters.status.indexOf(value) === 0,
},