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

2024年2月3日 175次阅读 来源: DanielLi

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

Usage

// Step1 下载代码
git clone https://github.com/leezng/el-form-renderer.git

// Step2 在需要使用本组件的 .vue 文件中
<template>
  <el-form-renderer :content="content"></el-form-renderer>
</template>

<script>
import ElFormRenderer from 'path/el-form-renderer'

export default {
  components: {
    ElFormRenderer
  }
}
</script>

Props

  • 支持 el-form 上的所有属性。
  • disabled [Boolean] 设置为 true 可禁用所有原子表单。
  • content [ObjectArray] 定义表单的内容，每一个 Object 代表一个原子表单(el-input, el-select, ...)，一切 el-form-item 上的属性都在此声明，而对于 el-input 等之上的属性在 $el 属性上进行声明，该 Object 上还存在其他属性，例如: $id, $type, $options[可选]。
// content example
[
  {
    $id: "form1", // 每一个原子都存在id，用于存储该原子的值，注意不能重复
    $type: "input", // 类型，element 提供的所有表单类型，即 el-xxx
    label: "输入框", // el-form-item上的属性
    rules: [{ required: true, message: '请输入活动名称', trigger: 'blur' }] // el-form-item上的属性
  }, {
    $id: "form2",
    $type: "select",
    label: "选择框",
    // $el 上用于定义具体原子表单(此处为el-select)的属性
    $el: {
      placeholder: "请选择内容"
    },
    // $options 具有选择功能的原子表单可用此定义可选项，例如: select, radio-group, radio-button, checkbox-group, checkbox-button
    $options: [{
      label: '区域一',
      value: 'shanghai'
    }, {
      label: '区域二',
      value: 'beijing'
    }]
  }
]

Methods

  • 支持 el-form 上的所有方法。
  • getFormValue 获取当前表单的值。

License

MIT

    原文作者：DanielLi
    原文地址: https://segmentfault.com/a/1190000012934728
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞