控制 FormItem 组件的状态的几种方法

根据条件控制表单字段的状态的几种方法：

staticOn,是否静态展示表达式，
hiddenOn,控制是否隐藏
visibleOn,控制是否可见，visibleOn和hiddenOn除了判断逻辑相反以外，没有任何区别
disabledOn,是否禁用
requiredOn,是否必输

以上的表达式都使用同一种表达式，比如语法 data.xxx > 5。data 表示是引用同一个 form 中的其它字段。也可以使用xxx >5,但是如果这个字段没有赋值，会变成 undefined 的错误。所以最好是加上data.xxx。

也可以使用this.xxx,它与data.xxx是等效的。

开发时可以加入debugger;进入调试断点

在表达式中还可以使用工具类utils的过滤器，官方并不建议使用。

源代码：D:\projects\amis\amis\packages\amis-core\src\utils\tpl.ts

// 几乎所有的 visibleOn requiredOn 都是通过这个方法判断出来结果，很粗暴也存在风险，建议自己实现。
// 如果想自己实现，请通过 setCustomEvalExpression 来替换。
export function evalExpression(expression: string, data?: object): boolean {
  if (typeof customEvalExpressionFn === 'function') {
    return customEvalExpressionFn(expression, data);
  }

  if (!expression || typeof expression !== 'string') {
    return false;
  }

  /* jshint evil:true */
  try {
    if (
      typeof expression === 'string' &&
      expression.substring(0, 2) === '${' &&
      expression[expression.length - 1] === '}'
    ) {
      // 启用新版本的公式表达式
      return !!evalFormula(expression, data);
    }

    // 后续改用 FormulaExec['js']
    let debug = false;
    const idx = expression.indexOf('debugger');
    if (~idx) {
      debug = true;
      expression = expression.replace(/debugger;?/, '');
    }

    let fn;
    if (expression in EVAL_CACHE) {
      fn = EVAL_CACHE[expression];
    } else {
      fn = new Function(
        'data',
        'utils',
        `with(data) {${debug ? 'debugger;' : ''}return !!(${expression});}`,
      );
      EVAL_CACHE[expression] = fn;
    }

    data = data || {};
    return fn.call(data, data, getFilters());
  } catch (e) {
    console.warn(expression, e);
    return false;
  }
}

处理原理是把用户的表达式封装成一个匿名的函数，并绑定表单的数据。

测试

json

{
  "searchable": true,
  "sortable": true,
  "type": "status",
  "staticOn": "console.log(`this,data,utils==========>`,this === data,this,data,utils)",
  "id": "u:539fbcb8d611",
  "label": "允许空值",
  "name": "nullable"
}

控制 FormItem 组件的状态的几种方法 ​

测试 ​

控制 FormItem 组件的状态的几种方法

测试