本文实例为大家分享了Vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下 思路 先把所有可能出现的表单/组件写在主页面每个表单/组件的slot 属性值要与后端返回的表单/组
本文实例为大家分享了Vue实现动态表单动态渲染组件的方式,供大家参考,具体内容如下
//主页面
<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中,此方式的好处在于表单数据都在一个页面,方便数据处理.
--结束END--
本文标题: vue实现动态表单动态渲染组件的方式(2)
本文链接: https://www.lsjlt.com/news/145116.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0