antd中message.loading接口成功如何关闭loading

在Ant Design (antd) 中，`Message.loading()` 提供了一个动态加载提示的功能，当你开始加载数据时显示，当请求完成或者遇到错误时可以自动关闭。如果你想在成功时手动关闭这个加载提示，你可以通过调用 `Message.success('加载完成')` 或者 `Message.hideLoading()` 来达到目的。

import { Message } from 'antd';

// 当异步操作成功后
axios.get('/api/data')
  .then(response => {
    // 处理数据...
    Message.success('加载完成'); // 显示成功消息并关闭loading
    // 或者
    Message.hideLoading(); // 直接关闭loading
  })
  .catch(error => {
    Message.error('加载失败');
  });

记得在你的异步操作完成后执行这个关闭操作，否则loading状态会一直保持直到用户离开当前页面。如果需要在特定条件下关闭，可以在回调函数内部添加判断条件。

相关问题

给antd table 删除当前行数据时添加loading

要给删除当前行数据时添加 loading，可以按照以下步骤操作：

1. 在 Table 组件中添加 loading 属性，例如：

   <Table
     loading={loading}
     dataSource={data}
     columns={columns}
     rowKey="id"
     onRow={(record, index) => ({
       onDelete: () => handleDelete(record, index),
     })}
   />

这里通过 `loading` 属性设置 Table 组件的 loading 状态。

2. 在 handleDelete 函数中添加 loading 状态，例如：

   const handleDelete = async (record, index) => {
     setLoading(true);
     try {
       await deleteData(record.id);
       setData(data.filter((item, idx) => idx !== index));
       message.success('删除成功');
     } catch (error) {
       message.error('删除失败');
     }
     setLoading(false);
   };

这里通过 `setLoading` 函数设置 loading 状态，在异步删除数据之前将 loading 状态设置为 true，在删除数据完成之后将 loading 状态设置为 false。

3. 在删除按钮中添加 loading 状态，例如：

   <Button
     onClick={onDelete}
     loading={loading}
     danger
     type="primary"
     size="small"
   >
     删除
   </Button>

这里通过 `loading` 属性设置按钮的 loading 状态。

antd中fileList如何进行异步展示

antd中的fileList可以通过设置action属性来进行异步展示，具体实现方式如下：

1. 在组件中设置action属性，指定上传文件的接口地址。

2. 在上传文件成功后，将文件信息添加到fileList中。

3. 在组件中监听fileList的变化，当fileList发生变化时，重新渲染组件，实现异步展示。

示例代码如下：

import { Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

class Avatar extends React.Component {
  state = {
    loading: false,
    imageUrl: '',
    fileList: [],
  };

  handleChange = ({ fileList }) => {
    this.setState({ fileList });
  };

  render() {
    const { loading, imageUrl, fileList } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>上传</div>
      </div>
    );
    return (
      <Upload
        action="/api/upload"
        listType="picture-card"
        fileList={fileList}
        onChange={this.handleChange}
      >
        {fileList.length >= 1 ? null : uploadButton}
      </Upload>
    );
  }
}

在上面的示例代码中，我们通过设置action属性来指定上传文件的接口地址，然后在handleChange方法中将上传成功的文件信息添加到fileList中，最后在组件中监听fileList的变化，实现异步展示。