在vue项目中,使用elementui封装一个form,且form的元素都是根据后端数据动态生成的,并使用该form在其他页面使用
时间: 2024-05-07 09:22:58 浏览: 95
vue复杂的form表单封装和使用
5星 · 资源好评率100%
首先,你需要在Vue项目中安装Element UI并在需要使用的页面引入Element UI的Form组件。然后,你需要创建一个Vue组件来封装该Form表单。
下面是一个示例:
```vue
<template>
<el-form :model="form" :rules="rules" ref="form">
<el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.prop">
<el-input v-if="item.type === 'input'" v-model="form[item.prop]" :placeholder="item.placeholder"></el-input>
<el-select v-else-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder">
<el-option v-for="(option, i) in item.options" :key="i" :label="option.label" :value="option.value" />
</el-select>
<!-- 其他类型的表单元素 -->
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">提交</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data () {
return {
form: {},
formItems: [
{ label: '用户名', prop: 'username', type: 'input', placeholder: '请输入用户名' },
{ label: '性别', prop: 'gender', type: 'select', placeholder: '请选择性别', options: [
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }
]},
// 其他动态生成的表单元素
],
rules: {
// 表单验证规则
}
}
},
computed: {
...mapGetters([
// 如果需要获取store中的数据,可以在这里使用mapGetters方法
])
},
methods: {
submitForm () {
this.$refs.form.validate(valid => {
if (valid) {
// 表单验证通过,可以在这里提交表单数据
} else {
return false
}
})
}
}
}
</script>
```
在其他需要使用该Form表单的页面中,你只需要引入该Vue组件并传入相应的数据即可:
```vue
<template>
<div>
<form-component :formItems="formItems" />
</div>
</template>
<script>
import FormComponent from '@/path/to/FormComponent.vue'
export default {
components: {
FormComponent
},
data () {
return {
formItems: [
// 根据后端数据生成的表单元素
]
}
}
}
</script>
```
其中,`formItems`是根据后端数据动态生成的表单元素。在`FormComponent`组件中,我们使用`v-for`指令遍历`formItems`数组,根据不同的表单元素类型渲染不同的表单元素。这样,我们就可以在其他页面通过传入不同的数据来动态生成不同的表单。
阅读全文