vue表单动态添加组件,vue动态渲染列表

　　本文主要详细介绍了vue如何实现动态表单的动态渲染组件。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享了vue实现动态表单动态渲染组件的方法，供大家参考。具体情况如下

思路

　　首先，在主页上写下所有可能的表单/组件。每个表单/组件的slot属性值应该与后端返回的表单/组件类型相匹配。根据后端返回的数据，动态生成一个槽列表，槽的名称属性要和数据类型匹配。这个列表要放入一个子组件中引入主页面，之前写在主页面上的所有表单/组件都要放入子组件标签中，通过匹配槽来渲染组件。如果插槽不匹配，则不会匹配。

　　//主页

　　模板

　　el-form :model=formData

　　//将后端获取的数据传递给子组件，动态生成槽位列表。

　　FormItemSlot:formItemList= formItemList

　　El-form-item label= switch slot= switch-component

　　el开关

　　v-model=formData.checked

　　active-color=#13ce66

　　inactive-color=#ff4949

　　/el开关

　　/El-表单-项目

　　El-form-item标签=名字槽=输入组件

　　el-input v-model=formData .用户名/el-input

　　/El-表单-项目

　　El-form-item标签=角色槽=选择组件

　　El-select v-model= formdata . role placeholder=请选择

　　el选项

　　v-for=选项中的项目

　　:key=item.value

　　:label=item.label

　　:value=item.label

　　/el选项

　　/el-select

　　/El-表单-项目

　　/FormItemSlot

　　/el格式

　　/模板

　　脚本

　　Improt引入了来自ItemSlot的槽列表子组件(如下)

　　导出默认值{

　　data() {

　　返回{

　　表单列表：[

　　{type: switch-component ，require: true，label: switch ，key: isOpen}，

　　{type: input-component ，require: true，label: name ，key: name}，

　　{type: select-component ，require: true，label: role ，key: role}，

　　],

　　表单数据：{

　　},

　　选项：[

　　{

　　值：“1”，

　　标签:“李世民”

　　},

　　{

　　值：“2”，

　　标签:“嬴政”

　　},

　　{

　　值：“3”，

　　标签:“刘邦”

　　},

　　{

　　值：“4”，

　　标签:“项羽”

　　},

　　{

　　值：“5”，

　　标签:“范蠡”

　　}

　　],

　　}

　　},

　　组件：{

　　表单插槽

　　},

　　}

　　/脚本

　　///FormItemSlot.vue插槽列表

　　模板

　　div class=slot-wrap

　　formItemList中的slot v-for=(item，index ):name= item . type /slot

　　/div

　　/模板

　　脚本

　　导出默认值{

　　名称：表单插槽，

　　道具：{

　　表单列表：{

　　类型：数组，

　　默认(){

　　return []

　　}

　　}

　　}

　　}

　　/脚本

　　样式范围

　　/风格

　　以上数据将直接收集到formData中。这种方法的优点是表单数据都在一个页面上，方便数据处理。

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。