ant-design/sunflower

Column排序,筛选该如何处理?

lencx opened this issue · 5 comments

lencx commented

有两个疑问可以麻烦解答一下吗?

  1. Column中的sorteronFilter是通过Table的onChange事件去单独处理吗?
  2. useFormTable配置中search方法的参数如何与Column中的sorteronFilter参数进行合并?

你是想在 Table 使用 sorter 访问后台?比如 https://ant.design/components/table-cn/#components-table-demo-ajax

这个场景不适用于 useFormTable。useFormTable 是用于表单作为查询条件,进行搜索,之后请求后台,Table 展示。而问题的需求是想不通过 Form 作为查询条件,而是通过 Table 来作为查询条件去请求后台。

在业务里,要是有 Form,又在 Table 里去做查询是不推荐的,FormTable 比 在 Table 里做 sorter 及 filter 更好的地方在于回填及以及更多的搜索条件。

那需要有什么方式来做?

  1. 使用 useFormTable,sorter 及 filter 只是后台查询的条件,在 Form 中加 Select 即可,而不使用 Table 的 sorter 及 filter
import { Select } from 'antd';
const {Form, Table} = useFormTable(config);

<Form>
  <Form.Item name="sorted">
    <Select>
      <Select.Option value="1">sorter 1</Select.Option>
      <Select.Option value="2">sorter 2</Select.Option>
    </Select>
  </Form.Item>

  <Form.Item name="filter">
    <Select>
      <Select.Option value="1">filter 1</Select.Option>
      <Select.Option value="2">filter 2</Select.Option>
    </Select>
  </Form.Item>
</Form>
  1. 加一个场景,比如 useRemoteTable 的场景。(需要在 sunflower 加上)
const { Table }  = useRemoteTable({
  sorter: () => Promise,
  filter: () => Promise,
});

<Table />
lencx commented

好的,谢谢了。确实是想在Table使用sorter访问后台,尝试了很多方法,行不通,就来请教一下。

@lencx 是很通用的需求,会加上一个 useRemoteTable

lencx commented

嗯嗯,谢谢了

@lencx sunflower-antd@0.2.0

import { useFormTable } from 'sunflower-antd';

useFormTable({
  search({ currentPage, pageSize, filters, sorter, ...formValues })
})