Rule配置规则
通过 rule
字段的配置,可以实现对应控件(组件配置项)的显隐控制。
使用场景
当一些配置项在某些条件下为无效配置,但在另外一些条件下又为有效配置时,可以使用 rule
字段来控制其自身是否在配置面板中显示。这样做可以减少信息的干扰。
配置规则
{
...,
rule: [
["name", "operator", "value"],
...
],
ruleType: "ruleType"
}
参数说明
rule | 配置显隐的规则。配置项为一个或者多个三项数组组成的数组。三项值分别对应name、operator和value。如果满足条件则显示该控件,不满足则不显示 |
name | 依赖的配置项的名字 |
operator | 比较操作符。支持的有:
该配置的值除了$eq 和 $neq之外, 其他值需平台版本 v4.7.0及以上才支持 |
value | 依赖的配置项的值 |
ruleType | 条件之间的逻辑关系。默认为
该配置需平台版本 v4.7.0及以上才支持 |
示例
export default{
...
configuration: [
{
name: "action",
displayName: "方向",
type: "select",
value: "left",
config: {
options: [
{
name: "左",
value: "left"
},
{
name: "右",
value: "right"
}
]
}
},
{
// 当action的value为"left"时显示
rule: [
[
"action", //依赖的配置项的名字
"$eq", //比较操作符
"left" //依赖的配置项的值
],
],
name: "left",
displayName: "左",
type: "number",
value: 0
},
{
// 当action的value为"right"时显示
rule: [
[
"action",
"$eq",
"right"
]
],
name: "right",
displayName: "右",
type: "number",
value: 0
}
],
...
}
{
...
configuration: [
{
"name": "action",
"displayName": "方向",
"type": "select",
"value": "left",
"config": {
"options": [
{
"name": "左",
"value": "left"
},
{
"name": "右",
"value": "right"
}
]
}
},
{
"rule": [
[
"action",
"$eq",
"left"
]
],
"name": "left",
"displayName": "左",
"type": "number",
"value": 0
},
{
"rule": [
[
"action",
"$eq",
"right"
]
],
"name": "right",
"displayName": "右",
"type": "number",
"value": 0
}
]
...
}
注意:当rule依赖的配置项和当前rule控制的配置项不同级,例如在配置项分组中,把父级或子级配置项作为依赖,须遵循跨Tab配置规则。
示例Demo下载
如遇其他使用问题,可扫描下方二维码,获取更多产品支持~