封装一个element-ui组件,实现传入一个对象数组,根据对象的属性labelType,属性为element标签,显示出每个对象对应的element标签
时间: 2024-05-08 17:16:32 浏览: 145
【JavaScript源代码】element-ui 弹窗组件封装的步骤.docx
以下是一个简单的实现示例:
```
<template>
<div>
<el-form :model="form">
<el-form-item v-for="(item, index) in items" :key="index" :label="item.label">
<component :is="item.labelType" v-model="form[item.prop]" :options="item.options"></component>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true
}
},
data() {
return {
form: {}
}
}
}
</script>
```
在这个组件中,我们通过props接收一个对象数组items,每个对象包含三个属性:
- label: 表单项的标签名
- prop: 表单项的字段名,用于绑定v-model
- labelType: 对应的element标签名,比如'el-input'、'el-select'等
在组件中,我们通过v-for循环遍历items数组,动态生成表单项,并根据labelType属性动态渲染对应的element标签。
其中,我们使用了Vue的动态组件,即通过component标签动态渲染不同的组件。我们将item.labelType作为component标签的is属性值,使得能够根据不同的labelType值渲染出不同的element标签。
此外,我们将v-model绑定到form对象的对应属性上,使得表单项值的变化能够反映到form对象中,方便后续的表单提交等操作。同时,我们还通过props传入了每个表单项的options属性,用于渲染下拉选择框、多选框等element组件的选项列表。
使用这个组件时,只需要将需要显示的表单项以对象的形式传入即可,例如:
```
<template>
<div>
<my-form :items="formItems"></my-form>
</div>
</template>
<script>
import MyForm from '@/components/MyForm'
export default {
components: {
MyForm
},
data() {
return {
formItems: [
{
label: '姓名',
prop: 'name',
labelType: 'el-input'
},
{
label: '性别',
prop: 'gender',
labelType: 'el-radio',
options: [
{
label: '男',
value: 'male'
},
{
label: '女',
value: 'female'
}
]
},
{
label: '爱好',
prop: 'hobbies',
labelType: 'el-checkbox-group',
options: [
{
label: '旅游',
value: 'travel'
},
{
label: '美食',
value: 'food'
},
{
label: '阅读',
value: 'reading'
}
]
}
]
}
}
}
</script>
```
这样,就可以根据传入的formItems数组动态生成表单了,不需要手动一个一个写表单项。
阅读全文