本文实例为大家分享了vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下
思路
- 先把所有可能出现的表单/组件写在主页面
- 每个表单/组件的slot 属性值要与后端返回的表单/组件类型匹配
- 根据后端返回的数据,动态生成一个slot列表,slot的name属性要与数据的类型匹配,此列表放入一个子组件
- 在主页面引入子组件,把之前主页面写好的各个表单/组件放入子组件标签中,通过匹配slot插槽去渲染组件,没有匹配到插槽的则不会渲染
案例
//主页面 <template> <el-form :model="formData"> //把从后端取到的数据传给子组件,动态生成slot插槽列表 <FormItemSlot :formItemList="formItemList"> <el-form-item label="开关" slot="switch-component"> <el-switch v-model="formData.checked" active-color="#13ce66" inactive-color="#ff4949" > </el-switch> </el-form-item> <el-form-item label="名字" slot="input-component"> <el-input v-model="formData.username"></el-input> </el-form-item> <el-form-item label="角色" slot="select-component"> <el-select v-model="formData.role" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label"> </el-option> </el-select> </el-form-item> </FormItemSlot> </el-form> </template> <script> improt 引入slot列表子组件 FromItemSlot(下面有) export default { data() { return { formItemList: [ { type: 'switch-component', require: true, label: '开关', key: 'isOpen' }, { type: 'input-component', require: true, label: '姓名', key: 'name' }, { type: 'select-component', require: true, label: '角色', key: 'role' }, ], formData: { }, options: [ { value: '1', label: '李世民' }, { value: '2', label: '嬴政' }, { value: '3', label: '刘邦' }, { value: '4', label: '项羽' }, { value: '5', label: '范蠡' } ], } }, components: { FormItemSlot }, } </script>
//FormItemSlot.vue 插槽列表 <template> <div class="slot-wrap"> <slot v-for="(item, index) in formItemList" :name="item.type"></slot> </div> </template> <script> export default { name: 'FormItemSlot', props: { formItemList: { type: Array, default() { return [] } } } } </script> <style scoped> </style>
以上数据会直接收集到formData中,此方式的好处在于表单数据都在一个页面,方便数据处理.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。