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

2023年1月25日 310次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞