el-form-renderer
基于 element-ui 封裝的表單渲染器，完整繼承了 element 的屬性定義拨脉，并進行了簡單擴展哆姻，從而用戶能夠通過使用一段預(yù)設(shè)的數(shù)據(jù)渲染出一個完整的 element 表單。查看demo
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] 設(shè)置為true可禁用所有原子表單矛缨。content[ObjectArray] 定義表單的內(nèi)容，每一個Object代表一個原子表單(el-input, el-select, ...)帖旨，一切el-form-item上的屬性都在此聲明箕昭，而對于el-input等之上的屬性在$el屬性上進行聲明，該Object上還存在其他屬性碉就，例如:$id, $type, $enableWhen[可選], $options[可選]盟广。
// content example
[
{
$id: "form1", // 每一個原子都存在id闷串，用于存儲該原子的值瓮钥，注意不能重復(fù)
$type: "input", // 類型，element 提供的所有表單類型烹吵，即 el-xxx
$enableWhen: { form2: 'beijing' }, // 可選屬性碉熄，表示當(dāng) form2 的值為 beijing 時顯示
label: "輸入框", // el-form-item上的屬性
rules: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' }] // el-form-item上的屬性
}, {
$id: "form2",
$type: "select",
label: "選擇框",
// $el 上用于定義具體原子表單(此處為el-select)的屬性
$el: {
placeholder: "請選擇內(nèi)容"
},
// $options 具有選擇功能的原子表單可用此定義可選項，例如: 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
歡迎小伙伴們 Fork，Star
如果有好的想法可以提 Issues 或 PR～
