ant ProTable使用switch

最新推荐文章于 2023-06-19 10:24:44 发布

原创最新推荐文章于 2023-06-19 10:24:44 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#数学建模

本文介绍如何在Ant Design Pro Table中集成Switch组件，并在后端接口返回成功后动态更新特定行的数据。

antd proTable 使用 Switch，请求接口成功后更新指定行

import { Switch } from 'antd';

  const { dispatch, switchLoading } = props;
  const switchClick = (record, action) => {
    dispatch({
      type: 'InspectPlan/planEditStatus',
      params: {
        planId: record.id,
        planStatus: record.planStatus === 1 ? 0 : 1,
      },
      callback: () => {
        record.planStatus = record.planStatus === 1 ? 0 : 1
      },
    });
  };
  
<
	ProTable
	columns={[
		{
	      title: '状态',
	      dataIndex: 'planStatus',
	      valueType: 'switch',
	      initialValue: '0',
	      hideInSearch: true,
	      align: 'center',
	      render: (_, record, index, action) => {
	        return (
	          <Switch
	            checked={record.planStatus === 1}
	            onClick={() => switchClick(record, action)}
	            loading={switchLoading}
	          />
	        );
	      },
	    },
	]}
/>