基于element的表单渲染器 (el-form-renderer)

GitHub地址： @femessage/el-form-renderer

文档链接: https://femessage.github.io/el-form-renderer/#/Components 里面详细的说明各个参数的用法

我觉得找再多的博客文章 官方文档是最好的解释

基于 element-ui 封装的表单渲染器，完整继承了 element 的属性定义，并进行了简单扩展，从而用户能够通过使用一段预设的数据渲染出一个完整的 element 表单。但它不仅仅是 element-ui ，甚至不仅仅是表单。

Element-UI 表单链接地址： https://element.eleme.cn/#/zh-CN/component/form

Element-UI 的Form Attributes、Methods、Events等 el-form-renderer完全继承

<el-form-renderer
	label-width="130px"
	label-position="right"
	ref="form"
	:content="content"
	inline
/>

Props

• 支持 el-form 上的所有属性。
• content：[ObjectArray] 定义表单的内容，每一个 Object 代表一个原子表单 el-input, el-select, ...，一切 el-form-item 上的属性都在此声明，而对于 el-input 等之上的属性在 $el 属性上进行声明，该 Object 上还存在其他属性，例如: id, type,label, options可选的，等。还有hidden定义其是否隐藏等属性

Eg：

content = [
    {
      type: 'input',
      id: 'accountId',
      label: '账号ID',
      disabled: true, // 不可编辑
    },
    {
      type: 'input',
      id: 'operator',
      label: '运营者姓名',
      rules: [{ validator: ******, trigger: 'blur' }], // validator 定义规则
    },
    {
      component: ******, // 可以引入组件,
      id: 'identityCard',
      label: '身份证',
      el: {
        mate: 'q_identityCardTails',
        data: {},
      },
    },
    {
      type: 'select', // 下拉框 remote 获取下拉框的值
      id: 'category',
      label: '账号分类',
      remote: {
        url: '/fee/subsidy/category',
        onResponse: (data: string[]): { value: string }[] => {
          console.log('data: ', data);// 可以打印一下
          return data.map((value: string) => ({ value }));
        },
      },
    },
  ];

使用 remote 属性，简单配置一下远端接口 url，即可自动发起请求并更新 options 属性

remote 在内部做了什么？

export default {
  watch: {
    remote({url}) {
      this.$axios.get(url).then(resp => setOptions(id, resp.data))
    }
  }
}

这篇文章更好的理解 有好的demo： https://juejin.cn/post/6844903897853591566

• 表单项动态显示或隐藏
• 表单数据联动
• 表单输入/输出数据格式化
• 非常规表单项的处理
• 复杂的表单验证