Leanote's Blog
I love Leanote!
Toggle navigation
Leanote's Blog
Home
Chrome
Git
Linux
Windows
Others
工具大全
VsCode
Expo
Html
JavaScript
Npm
Node
Mock
React-Native
React
TypeScript
小程序
插件
正则
Dva
Ant-Design-React
Umi
Vue
Vux
Ant-Design-Vue
Http
Java
flutter
开发小工具
About Me
Archives
Tags
自定义表格组件单元格触发接口失败时恢复数据
2025-11-10 03:23:33
0
0
0
admin
```tsx import { v4 as uuidv4 } from 'uuid' const { request: updateEnabledRequest, loading: updateSortLoading } = useRequest(switchApi) /** * 修改开关状态 */ const handleChangeEnabled = debounce(async (record: Record<string, unknown>) => { try { const params = { id: record?.id, enabled: !record?.enabled, } await updateEnabledRequest({ method: 'put', params }) message.success('修改成功') } catch { const newTableData = [...(tableRef?.current?.data?.list ?? [])].map((item) => { if (item?.id === record?.id) { return { ...item, rowKey: uuidv4() } } return item }) tableRef.current?.mutate({ list: newTableData, total: tableRef?.current?.data?.total }) } }, 10) const columns = [ { title: '状态', dataIndex: 'enabled', width: 80, render: (text, record) => { // 按钮权限判断 if (!validatePermission('commodityCenter_listingTemplate:update')) return null return ( <Switch key={`${record?.rowKey}-${text}`} // 失败回退值必须的 loading={updateSortLoading} onChange={() => handleChangeEnabled(record)} checkedChildren="启用" unCheckedChildren="禁用" defaultChecked={text} // 默认值, 搭配key在值更新后跟随更新 /> ) }, } ] ```
Pre:
实惠的云服务器
Next:
Form控制Table的值
0
likes
1
Weibo
Wechat
Tencent Weibo
QQ Zone
RenRen
Submit
Sign in
to leave a comment.
No Leanote account?
Sign up now.
0
comments
More...
Table of content
admin
No Leanote account? Sign up now.