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

yiliang 發(fā)布于2019-08-22 13:57 / 2847人閱讀

摘要：基于封裝的表單渲染器，完整繼承了的屬性定義，并進(jìn)行了簡(jiǎn)單擴(kuò)展，從而用戶能夠通過(guò)使用一段預(yù)設(shè)的數(shù)據(jù)渲染出一個(gè)完整的表單。設(shè)置為可禁用所有原子表單。獲取當(dāng)前表單的值。

基于 element-ui 封裝的表單渲染器，完整繼承了 element 的屬性定義，并進(jìn)行了簡(jiǎn)單擴(kuò)展，從而用戶能夠通過(guò)使用一段預(yù)設(shè)的數(shù)據(jù)渲染出一個(gè)完整的 element 表單。

演示地址

項(xiàng)目地址

Usage

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

// Step2 在需要使用本組件的 .vue 文件中

Props

支持 el-form 上的所有屬性。

disabled [Boolean] 設(shè)置為 true 可禁用所有原子表單。

content [ObjectArray] 定義表單的內(nèi)容，每一個(gè) Object 代表一個(gè)原子表單(el-input, el-select, ...)，一切 el-form-item 上的屬性都在此聲明，而對(duì)于 el-input 等之上的屬性在 $el 屬性上進(jìn)行聲明，該 Object 上還存在其他屬性，例如: $id, $type, $options[可選]。

// content example
[
  {
    $id: "form1", // 每一個(gè)原子都存在id，用于存儲(chǔ)該原子的值，注意不能重復(fù)
    $type: "input", // 類(lèi)型，element 提供的所有表單類(lèi)型，即 el-xxx
    label: "輸入框", // el-form-item上的屬性
    rules: [{ required: true, message: "請(qǐng)輸入活動(dòng)名稱", trigger: "blur" }] // el-form-item上的屬性
  }, {
    $id: "form2",
    $type: "select",
    label: "選擇框",
    // $el 上用于定義具體原子表單(此處為el-select)的屬性
    $el: {
      placeholder: "請(qǐng)選擇內(nèi)容"
    },
    // $options 具有選擇功能的原子表單可用此定義可選項(xiàng)，例如: select, radio-group, radio-button, checkbox-group, checkbox-button
    $options: [{
      label: "區(qū)域一",
      value: "shanghai"
    }, {
      label: "區(qū)域二",
      value: "beijing"
    }]
  }
]

Methods

支持 el-form 上的所有方法。

getFormValue 獲取當(dāng)前表單的值。

License

MIT