【图文并茂】ant design pro 如何用 Switch 来实现一个动态优雅切换的功能

如上图所示

我们经常要设置一些记录是否启用

类似这样的功能

虽然我们可以类似这样来处理

但是在列表页处理的话，可以体验更好，更直接一些

    {
      title: intl.formatMessage({ id: 'isEnable' }),
      dataIndex: 'isEnable',
      width: 150,
      hideInSearch: true,
      render: (_, record: any) => (
        <Switch
          checkedChildren={intl.formatMessage({ id: 'select_online' })}
          unCheckedChildren={intl.formatMessage({ id: 'select_offline' })}
          checked={record.isOnline}
          onChange={async () => {
            await handleUpdate({ _id: record._id, isOnline: !record.isOnline });
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }}
        />
      ),
    },

首先后端是有 isOnline 这个属性的。

const materialCategorySchema = new mongoose.Schema(
  {
    name: { type: String, required: true },
    image: { type: String },
    parent: { type: mongoose.Schema.Types.ObjectId, ref: 'MaterialCategory' },
    isOnline: { type: Boolean },
  },
  { timestamps: true },
);

 await handleUpdate({ _id: record._id, isOnline: !record.isOnline });

这里会发送请求的

请求完会刷新列表页的数据

 if (actionRef.current) {
              actionRef.current.reload();
            }

完结

• 获取 ant design pro & nodejs & typescript 多角色权限动态菜单管理系统源码*
• 我正在做的程序员赚钱副业 - Shopify 真实案例技术赚钱营销课视频教程