基於element的表單渲染器 (el-form-renderer)

基於 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

原文地址：https://segmentfault.com/a/1190000012934728