本文主要是介绍【图文并茂】ant design pro 如何用 Switch 来实现一个动态优雅切换的功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
如上图所示
我们经常要设置一些记录是否启用
类似这样的功能
虽然我们可以类似这样来处理
但是在列表页处理的话，可以体验更好，更直接一些
{title: intl.formatMessage({ id: 'isEnable' }),dataIndex: 'isEnable',width: 150,hideInSearch: true,render: (_, record: any) => (<SwitchcheckedChildren={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 真实案例技术赚钱营销课视频教程
这篇关于【图文并茂】ant design pro 如何用 Switch 来实现一个动态优雅切换的功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
