即使表已填充数据，Ant Design 表也会继续显示正在加载

Question

我在我的前端项目中使用 Ant 设计。我有一个表组件，它由 API 中的数据填充。获取数据需要一些时间，因此我想显示一个加载微调器。

<Table
  columns={queueColumns}
  dataSource={queueData}
  loading={{ indicator: <div><Spin /></div>}} 
/>

我的问题是，即使在表加载了数据后，我的表仍继续显示加载微调器。

当表格填满数据时，如何使旋转器消失？

我怀疑我需要在表组件的加载属性中添加一个条件。但我不知道该怎么做

---

编辑：我正在获取这样的数据：

    const [queueData, setQueueData] = useState('');

    useEffect(() => {        
        var config = {
          method: 'GET',
          url: '/api/queues',
          headers: { 
            'Content-Type': 'application/json'
          }
        };
        axios(config)
        .then(function (response) {
            setQueueData(response.data)
        }) 
      }, [])

Answer 1

不幸的是，缺少 AntTable组件的文档。要指示您的表是否正在加载，您可以传递loading={true}或loading={false}。要设置自定义微调器，您可以设置loading={{indicator: <MyBeautifulSpinner/>, spinning: true/false}}. 该spinning属性指示表是否处于加载模式。您需要有一个状态，该状态在获取数据后会发生变化。查看更多 Ant 的表loading：

https://github.com/ant-design/ant-design/blob/master/components/table/Table.tsx#L457