Vue 实现动态表单/动态渲染组件的方式(一),供大家参考,具体内容如下 思路 先写好各个可能会出现的表单或者自定义的组件,引入。此时后端可能会给到一个对象型数组,每个对象有要渲染组
Vue 实现动态表单/动态渲染组件的方式(一),供大家参考,具体内容如下
三个表单组件,用了element-ui
此处用了自定义组件的v-model来收集子组件的数据
//InputComponent.vue 要渲染的子组件
<template>
<el-input :value="username" @input="inputHandler"></el-input>
</template>
<script>
export default {
name: 'InputComponent',
data() {
return {
}
},
model: {
prop: 'username',
event: 'input'
},
props: {
username: String
},
methods: {
inputHandler(ev) {
console.log(ev)
this.$emit('input', ev)
}
}
}
</script>
<style scoped>
</style>
//SwitchComponent.vue 要渲染的子组件
<template>
<el-switch
:value="checked"
active-color="#13ce66"
inactive-color="#ff4949"
@change="changeHandler"
>
</el-switch>
</template>
<script>
export default {
name: 'SwitchComponent',
data() {
return {
}
},
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: {
default: true
}
},
methods: {
changeHandler(ev) {
this.$emit('change', ev)
}
}
}
</script>
<style scoped>
</style>
//SelectComponent.vue 要渲染的子组件
<template>
<el-select :value="role" placeholder="请选择" @change="changeHandler">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.label">
</el-option>
</el-select>
</template>
<script>
export default {
name: 'SelectComponent',
data () {
return {
options: [
{
value: '1',
label: '李世民'
},
{
value: '2',
label: '嬴政'
},
{
value: '3',
label: '刘邦'
},
{
value: '4',
label: '项羽'
},
{
value: '5',
label: '范蠡'
}
],
value: ''
}
},
model: {
prop: 'role',
event: 'change'
},
props: {
role: {
default: ''
}
},
methods: {
changeHandler(ev) {
this.$emit('change', ev)
}
}
}
</script>
<style scoped>
</style>
主组件(父组件)
此处用了自定义组件的v-model来收集子组件的数据
//Main.vue 父组件
<template>
<div>
<el-fORM :model="formData">
<el-form-item v-for="(item, index) in formItemList" :key="index" :label="item.label">
<component
:is="item.type"
v-model="formData[item.key]"
>
</component>
</el-form-item>
</el-form>
</div>
</template>
<script>
//引入三个表单组件
import InputComponent from './subComponents/InputComponent'
import SelectComponent from './subComponents/SelectComponent'
import SwitchComponent from './subComponents/SwitchComponent'
export default {
name: 'Main',
data() {
return {
//数据的type值要与组件的名字对应
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: {
}
}
},
components: {
InputComponent,
SwitchComponent,
SelectComponent,
},
methods: {
}
}
</script>
<style scoped lang="less">
</style>
vue实现动态表单动态渲染组件的方式(2)
--结束END--
本文标题: vue实现动态表单动态渲染组件的方式(1)
本文链接: https://www.lsjlt.com/news/145108.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