[动态表单 jformer] 自定义渲染处理实现 element 表单

时间 2021-01-30

标签 css html vue git github npm element-ui json app async 栏目 HTML 繁體版

原文原文链接

jformer 是一个动态表单呈现组件，只须要传递 json 数据就能够显示出界面和功能css

element 表单组件外须要套一个 el-form-item 实现前缀显示和数据验证，如今基于 jformer 扩展一个渲染处理 provider 简化这个定义html

完整示例

html 页

<!DOCTYPE html><html lang="en">
  <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Static Template</title><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="https://cdn.jsdelivr.net/npm/jformer"></script><script src="https://cdn.jsdelivr.net/npm/element-ui/lib/index.js"></script><script src="./element-ext.js"></script><link  rel="stylesheet"  href="https://cdn.jsdelivr.net/npm/element-ui/lib/theme-chalk/index.css"/>
  </head>
  <body><div id="app">  <j-former v-bind:config="config"></j-former></div><script>  new Vue({data() {          return {config: {}
          };
        },async mounted() {          const response = await fetch("./config.json");          this.config = await response.json();
        }
      }).$mount("#app");</script>
  </body></html>复制代码

provider 扩展实现

element-ext.js 实现了一个渲染处理 provider, 将定义组件外套一层 el-form-item，并将组件的 elForm 属性做为 el-form-item 的属性vue

// 实现一个渲染处理 provider 实如今组件上定义 elForm// 就能够自动在组件外层加上 el-form-itemconst elementFormProps = (field) => {  if (!field.elForm) {return;
  }  // 复制组件原始配置
  const originField = { ...field };  // 将组件名改为 el-form-item
  field.component = "el-form-item";  // 将原组件的复制赋给组件下级实现改变界面结构
  field.children = [originField];  // 将 elForm 属性做为 el-form-item 的属性
  field.fieldOptions = {props: field.elForm
  };  // 若是组件关联了数据属性则将数据属性做为 el-form-item 的数据属性
  if (originField.model) {
    field.fieldOptions.props.prop = originField.model;
  }  // 删除 elForm 定义避免下级组件渲染处理时无限循环
  delete field.elForm;  delete originField.elForm;
};// 将定义的 provider 应用于 jformerwindow.jformer.default.use(({ provider }) => {
  provider(elementFormProps);
});复制代码

配置文件

{  "fields": [
    {      "component": "el-form",      "fieldOptions": {"ref": "form","props": { "labelWidth": "120px", "model": "$:model" }
      },      "children": [
        {          "component": "el-input",          "model": "text1",          "fieldOptions": { "attrs": { "placeholder": "请输入" } },          "elForm": {"label": "输入1","rules": [{ "required": true, "message": "必填项" }]
          }
        },
        {          "component": "el-input",          "model": "text2",          "fieldOptions": {"attrs": { "placeholder": "输入 1 多于5个字以后就必填" }
          },          "elForm": {"label": "输入2","rules": [
              { "required": "$:model.text1.length>5", "message": "必填项" }
            ]
          }
        },
        {          "component": "div",          "elForm": { "label": "" },          "children": [
            {              "component": "el-button",              "text": "提交",              "events": [
                { "name": "click", "handler": "@:refs.form.validate()" }
              ],              "fieldOptions": { "props": { "type": "primary" } }
            },
            {              "component": "el-button",              "text": "重置"}
          ]
        }
      ]
    }
  ]
}复制代码

示例完整实现:
codesandbox.io/s/jformer-t…git

预览效果:
d9c7b.csb.app/github

可视化设计器:
GitHub
Giteenpm