项目中常用到form表单提交，并加以校验，为了简化代码，对elementUI的form表单进行一次简单的组件封装。
页面大致如下：
直接上代码~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>element-table</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.js"></script>
<style>
#app {
margin-top: 100px;
}
.main-form {
width: 40%;
margin: 0 auto;
}
.submit-btn {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<form-component ref="form" :data="formData" :items="viewFormItems"></form-component>
<div class="submit-btn">
<el-button size="mini" type="primary" @click="submit">submit</el-button>
</div>
</div>
<script>
var formComponent = {
template: `
<el-form label-width="150px" :rules="rules" ref="items" :model="data">
<div class="main-form">
<div v-for="item in items" :key="item.label" :class="item.class || 'col-md-6'">
<el-form-item :label="item.label + '：'" :prop="item.prop">
<el-input
v-if="item.type === 'input'"
v-model="data[item.prop]"
:placeholder="item.props.placeholder || '请输入'"
:disabled="item.props.disabled || false"
></el-input>
<el-select
v-if="item.type === 'select'"
v-model="data[item.prop]"
:placeholder="item.props.placeholder || '请选择'"
:disabled="item.props.disabled || false"
style="width: 100%;"
>
<el-option
v-for="i in item.props.list"
:key="i.value"
:label="i.label"
:value="i.value"
></el-option>
</el-select>
<el-switch
v-model="data[item.prop]"
v-if="item.type === 'switch'"
:disabled="item.props.disabled || false"
></el-switch>
<el-date-picker
v-model="data[item.prop]"
v-if="item.type === 'date'"
:disabled="item.props.disabled || false"
type="date"
:placeholder="item.props.placeholder || '请选择日期'"
style="width: 100%;"
></el-date-picker>
</el-form-item>
</div>
</div>
</el-form>
`,
props: {
formOption: Object,
items: Array,
data: Object
},
computed: {
rules () {
let rules = this.items.reduce((map, i) => {
if (i.rules) {
map[i.prop] = i.rules
}
return map
}, {})
return rules
}
},
methods: {
validate () {
return new Promise((resolve) => {
this.$refs.items.validate(resolve)
})
}
}
}
var app = new Vue({
el: '#app',
components: {
formComponent
},
data () {
return {
formData: {
actType: true,
actRegion: '',
name: '',
actDate: ''
},
viewFormItems: [
{
label: '活动名',
prop: 'name',
type: 'select',
props: {
placeholder: '请选择活动名称',
list: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}]
},
rules: [
{ required: true, message: '请选择活动名称', trigger: 'blur' }
]
},
{
label: '活动区域',
prop: 'actRegion',
type: 'input',
props: {
placeholder: ''
},
rules: [
{ required: true, message: '请输入活动区域', trigger: 'blur' }
]
},
{
label: '活动时间',
prop: 'actDate',
type: 'date',
props: {
placeholder: ''
}
},
{
label: '活动性质',
prop: 'actType',
type: 'switch',
props: {
placeholder: '',
disabled: true
}
},
]
}
},
methods: {
async submit () {
if (!(await this.$refs.form.validate())) {
return this.$message.error('请填写完整信息')
}
console.log(this.formData)
}
},
mounted () {
}
})
</script>
</body>
</html>
此次只是简单的封装，可以直接拆开用到项目的vue文件中，剥离成公用的组件。这里功能还不完善，传参也不够友好，后续再补充，大概会加上upload组件，自定义校验逻辑，使用插槽slot，render-content以及优化封装等。。。
