loading

天不生我鹤暮辞

已于 2023-03-09 18:55:01 修改

阅读量347

点赞数

文章标签： vue.js 前端 javascript

于 2023-02-15 16:28:47 首次发布

本文链接：https://blog.csdn.net/userNing/article/details/129044232

版权

该文描述了一个React组件，使用`exportdefaultconnect`进行状态管理，处理表格数据加载及图片上传时的loading状态。通过`loading.effects`跟踪异步操作，控制表格的加载显示，并展示了如何在图片上传前后设置及更新loading状态。

摘要由CSDN通过智能技术生成

export default connect(({ home, loading }) => {
  return {
    data: home.data,
    count: home.count,
    //home是models里面命名空间名,get是表格请求方法名
    loading: !!loading.effects['home/getSampleList'], //loading加载
  };
})(Detail);
function Detail(props) {
  const { dispatch, data, count, loading } = props;

放入以及解构出来

effects里面放要loading的接口

放入表格

 <Table
        dataSource={data}
        columns={columns}
        loading={loading}
        rowKey="id"
        pagination={{
          total: count,
          pageSize: 3,
          onChange,
        }}
      />

图片上传loading

创建loading显示隐藏

  const [loading, setLoading] = useState(false)

在上传图片里面调用

 const beforeUpload2 = async (file) => {
    loading = true
    setLoading({ ...loading });
    const formDate = new FormData()
    formDate.append('file', file)
    formDate.append('pid', 0)
    console.log(formDate);
    const img = await dispatch({
      type: 'upload/getImg',
      payload:
        formDate
    })
    loading.loading1 = false
    setLoading({ ...loading });

    setFileList([
      ...fileList,
      {
        uid: shortid.generate(),
        name: 'image.png',
        status: 'done',
        url: img,
      },
    ]);
    return false;

  }

upload里面放入

<Upload
        listType="picture-card"
        fileList={fileList}
        beforeUpload={beforeUpload2}
      >
        { loading ? '展示loading' : '上传' }
      </Upload>