Rule配置规则

通过 rule 字段的配置,可以实现对应控件(组件配置项)的显隐控制。

使用场景

当一些配置项在某些条件下为无效配置,但在另外一些条件下又为有效配置时,可以使用 rule 字段来控制其自身是否在配置面板中显示。这样做可以减少信息的干扰。

配置规则

{
	...,
  rule: [
  	["name", "operator", "value"],
		...
  ],
	ruleType: "ruleType"
}

参数说明

rule

配置显隐的规则。配置项为一个或者多个三项数组组成的数组。三项值分别对应name、operator和value。如果满足条件则显示该控件,不满足则不显示

name

依赖的配置项的名字

operator

比较操作符。支持的有:

  • $eq : 等于
  • $neq : 不等于
  • $gt:大于
  • $lt:小于
  • $gte:大于等于
  • $lte:小于等于
  • $in : 包含 
  • $nin:不包含

该配置的值除了$eq 和 $neq之外, 其他值需平台版本 v4.7.0及以上才支持

value

依赖的配置项的值

ruleType

条件之间的逻辑关系。默认为 $and , 可选值有 $and$or 。 

$and :  表示rule规则中的多条规则需要同时满足才显示

$or :  表述rule规则中的多条规则只要满足其中一条就可以显示

该配置需平台版本 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下载

如遇其他使用问题,可扫描下方二维码,获取更多产品支持~

400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群