element-ui表单组件根据json动态渲染

63 阅读 0 评论 42 点赞

我是靠谱客的博主默默大树，最近开发中收集的这篇文章主要介绍element-ui表单组件根据json动态渲染，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

需求

假设一个页面有上百个表单需要输入，且表单类型不限于button、select、input…如果前端将表单一个个写死，不仅工作量巨大，也不够灵活。所以，后端可以事先返回一个json文件，里面有关于该页面每一个表单项的类型、默认值、选项的定义，前端根据json来动态遍历渲染表单

demo

目录层级

|-- src
|-- components
|-- dynamicForm
|
|-- formList.vue
|
|-- formItem.vue
|
|-- index.js
|-- App.vue
|-- main.js

示例代码

// formList.vue
<template>
<div class="formWrap">
<el-form
class="dynamic-form"
:label-width="formConfig.labelWidth"
:size="formConfig.size"
>
<dynamic-form-item
v-for="(item,key) in formConfig.formItemList"
:key="key"
:configItem="item"
>
</dynamic-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'formList',
data(){
return{
// 注册表单项
formConfig:{
labelWidth: '80px',
size: "small",
formItemList:[
{
label:'输入框1',
type:"input",
value:"",
placeholder:"第一个输入框"
},
{
label:'',
type:"button",
subType:'primary',
text:'按钮喔'
}
]
}
}
}
}
</script>
<style scoped>
.formWrap{
width:60%;
margin: 0 auto;
}
</style>

//
formItem.vue
<template>
<el-form-item
:label="configItem.label"
>
<el-input v-if="configItem.type==='input'"
:placeholder="configItem.placeholder"
v-model="configItem.value"
/>
<el-button v-if="configItem.type=='button'"
:type="configItem.subType"
>{{configItem.text}}</el-button>
</el-form-item>
</template>
<script>
export default {
name: 'formItem',
props:{
configItem:{
type:Object,
default:null
}
},
data () {
return {}
}
}
</script>

// index.js
import Vue from 'vue'
import FormList from './formList.vue'
import FormItem from './formItem.vue'
// 全局注册组件
Vue.component('dynamic-form',FormList)
Vue.component('dynamic-form-item',FormItem)

// main.js
......
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
// 默认引入dynamicForm下的index.js
import '@/components/dynamicForm'
......