reactjs - 如何在 antd 表组件上设置默认排序器和过滤器？

Question

我正在使用 ant-design react 组件来制作仪表板，并使用了一个表格组件，我可以在其中定义填充数据后过滤器和排序器的方式。

如果有一个要求，我想在ID列和环境列中应用默认排序（降序），我想prod默认被选中（默认情况下只显示产品警报）。由于我不能在 ant-design 网站上询问使用问题，我想知道是否有人知道它并可以帮助我。如果您可以分享，我愿意采用不同的方法。

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);
}

console.log 的输出

>>> params Object { showQuickJumper: true, pageSize: 20, current: 1, total: 301 } Object { env: Array['prod'], incident_type: Array['loadChk'] } Object {  }

Answer 1

使用defaultSortOrder 像defaultSortOrder: 'descend'

Answer 2

您可以传递默认sortOrder值：这可以是ascend,descend或false; 这将允许您设置默认排序顺序。

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

就默认过滤器而言，您需要filteredValue按照上面提到的@Panther 设置道具。

Answer 3

您可以defaultFilteredValue用于设置默认过滤器值。给出要显示为字符串数组的值。

例如：

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

对于默认排序使用defaultSortOrder. 它可以取ascend和descend作为值。