实现场景:
在 Table 或 CURD 中对 Switch 列的开关操作加一层确认对话框
存在的问题:
Switch 组件本身不支持该功能,通过加一个 Button 包装后可以弹出对话框,但是被包裹的 Switch 组件却无法接收到行数据中的值
当前方案:
{
"name": "boolean",
"label": "开关",
"type": "button",
"actionType": "ajax",
"confirmText": "确认要更改?",
"body": {
"type": "switch",
"value": "${boolean}" // 无法将 $row.boolean 的值传给 Switch 组件
},
"api": "@switch:/amis/api/mock2/sample/${id}:boolean"
}
5条答案
按热度按时间0sgqnhkj1#
可以参考下 事件动作 ;
由于
Switch
的状态是非受控的,点击上去,他就会进行切换操作,建议取消或失败是 设置成 false,给你一个简单的demo参考一下pdtvr36n2#
@meerkat-morecats
取消或失败时不是设置成false,而是退回到原状态,问题是我怎么在
setValue
时拿到当前行中的switch
的值?vxbzzdmp3#
@meerkat-morecats 取消或失败时不是设置成false,而是退回到原状态,问题是我怎么在
setValue
时拿到当前行中的switch
的值?直接在column里配置 switch组件呢
fcwjkofz4#
直接在column里配置 switch组件呢
直接配置 switch 组件则没有办法配置 action 和 confirmText
我现在能想到的方案是封装一个 ActionSwitch 组件来实现
70gysomp5#
可以通过修改SwitchControl、Switch源代码实现需求(因为我是使用sdk方式,在vue3中使用,还没有研究如何自己封装新的组件,就先直接修改源代码了)。自己写组件估计思路也是大差不差的。大概思路是:通过配置column,增加一个ignorecheck属性和一个自定义的ignorecheck事件。通过这两个属性达到需要的效果:点击switch时不切换值,且不触发change事件,而是通过ignorecheck事件自己进行后续的逻辑处理,点击confirm后再设置crud组件的data值。
其中用到了一些未公开的方法,例如action事件的第三个参数涉及的context、parent、store.reInitData等,这些逻辑是通过分析CRUD组件的handleQuery方法得到的,估计不会大改,改了也没关系,不用太在意。
具体步骤(使用的amis版本为2.6.0,我是使用sdk方式在vue3中使用,需要一些特殊方法,将源代码补丁到sdk.js中):
1)schema配置:
2)修改Switch的onClick事件处理代码,如下:
3)需要将schema中的ignorecheck属性传递到react:
4)再修改SwitchController的onChange事件处理代码: