如何排序使用ANTD渲染select的列？

使用ANTD 的 Table 组件时，我们可以通过传入一些参数来定义列的属性，包括排序等方法。在需要排序使用 ANTD 渲染 select 的列时，我们可以通过实现 sorter 函数来实现。下面是一个示例代码：

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    sorter: (a, b) => a.name.localeCompare(b.name),
    render: (text) => <Select value={text}>
      <Select.Option value="1">选项1</Select.Option>
      <Select.Option value="2">选项2</Select.Option>
      <Select.Option value="3">选项3</Select.Option>
    </Select>,
  },
  {
    title: '年龄',
    dataIndex: 'age',
    sorter: (a, b) => a.age - b.age,
  },
];

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData().then((res) => setData(res));
  }, []);

  const fetchData = async () => {
    const res = await fetch('https://randomuser.me/api/?results=50');
    const json = await res.json();
    const result = json.results.map((item, idx) => ({
      key: item.login.uuid,
      name: item.name.first + item.name.last,
      age: Math.floor(Math.random() * 50) + 20,
    }));
    return result;
  };

  return (
    <Table dataSource={data} columns={columns} />
  );
}

ReactDOM.render(<App />, document.getElementById('container'));

在上面的示例中，我们通过定义 sorter 函数来实现对名称列的排序，这里使用了 localeCompare 方法。同时也是在名称列中使用了 Select 组件进行渲染。