这是在前一次封装的基础上加以完善，上一次的简单封装，可以看下这里vue+element-ui form表单的简单封装
页面大致如下：
直接上代码~
Form组件封装：EditForm.vue
表单字段rules校验，render，slot等使用
<template>
<el-form
ref="form"
v-bind="computedConfig"
:rules="rules"
:model="data"
>
<el-row>
<el-col
v-for="(item, index) in computedItems"
:key="getItemKey(item, index)"
:md="item.md"
:sm="item.sm"
>
<el-form-item :label="item.label + ':'" :prop="item.prop">
<render-content
slot="label"
v-if="item.labelRender"
:render="item.labelRender"
:data="item"
></render-content>
<slot :name="item.slot" v-bind="{ item }">
<component
v-if="item.component"
:ref="item.ref || `cp-${item.prop}`"
:is="item.component"
:data="data"
v-model="data[item.prop]"
v-bind="item.props"
v-on="item.listeners"
/>
<span v-else>{{data[item.prop]}}</span>
</slot>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
const defaultConfig = {
labelWidth: '120px'
}
// 表单字段格式化
const RenderContent = {
props: {
render: Function,
formatter: Function, // 格式化数据
data: Object,
prop: String
},
render (h) {
if (this.render) {
return this.render(h, this.data)
}
let value = this.data[this.prop]
if (this.formatter) {
value = this.formatter(value, this.data)
}
return <span>{value}</span>
}
}
// element UI 组件
const alias = {
input: {
component: 'el-input',
props: {}
},
textarea: {
component: 'el-input',
props: {
type: 'textarea'
}
},
radio: {
component: 'el-radio',
props: {}
},
label: {
component: 'render-content',
props: {}
},
select: {
component: 'el-select',
props: {}
},
datePicker: {
component: 'el-date-picker',
props: {
style: {
width: '100%'
},
"value-format": 'timestamp'
}
}
}
export default {
components: {
RenderContent
},
props: {
formConfig: Object,
formItems: Array,
data: Object
},
computed: {
computedConfig () {
return {
...defaultConfig,
...this.formConfig
}
},
computedItems () {
const itemResult = []
for (const item of this.formItems) {
// 剩余参数语法允许我们将一个不定数量的参数表示为一个数组。theArgs
let {component, showIf, prop, props, ...theArgs} = item
if (typeof showIf === 'function' && !showIf(this.data)) {
continue
}
if (typeof props === 'function') {
props = props(this.data)
}
if (component === 'label') {
props = {
...props,
data: this.data,
prop
}
}
if (alias[component]) {
props = {
...alias[component].props,
...props
}
component = alias[component].component
}
itemResult.push({
component,
prop,
props,
...theArgs
})
}
return itemResult
},
rules () {
let rules = this.computedItems.reduce((total, item) => {
if (item.rules) {
let rules = item.rules
if (typeof rules === 'function') {
rules = rules(this.data)
}
total[item.prop] = rules
}
return total
}, {})
return rules
}
},
methods: {
getItemKey (item, index) {
return `${item.prop}-${index}`
},
validate () {
return new Promise(resolve => {
this.$refs.form.validate(resolve)
})
},
clearValidate (props) { // 清空校验
this.$refs.form.clearValidate(props)
}
}
}
</script>
EditForm组件的使用：
<template>
<div>
<div style="width: 800px;margin: 0 auto;">
<edit-form
ref="editForm"
:form-items="formItems"
:form-config="formConfig"
:data="form"
>
<div slot="actRange2">
<el-select style="width: 100%" v-model="form.actRange2" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</div>
</edit-form>
<el-button @click="submit">submit</el-button>
</div>
</div>
</template>
<script>
import EditForm from './EditForm'
export default {
components: {
EditForm
},
data() {
return {
form: {
date: '',
name: '',
address: 'default address',
actRange: '',
actRange2: ''
},
formConfig: {
labelWidth: '120px'
},
formItems: [
{
label: '日期',
prop: 'date',
component: 'datePicker',
labelRender: () => {
return (
<span>
<el-tooltip effect="light" placement="left">
<template slot="content">
请选择日期
</template>
<i class="label-tip-icon el-icon el-icon-question"></i>
</el-tooltip>
日期:
</span>
)
},
md: 12,
sm: 12,
rules: [
{ required: true, trigger: 'change', message: '请选择日期' }
]
},
{
label: '姓名',
prop: 'name',
component: 'input',
props: {
placeholder: 'please enter name'
},
md: 12,
sm: 12,
rules: form => {
return form.date
? [{ required: true, trigger: 'blur', message: '请输入姓名' }]
: []
}
},
{
label: '地址',
prop: 'address',
component: 'input',
props: {
disabled: true,
placeholder: 'please enter address'
}
},
{
label: '活动',
prop: 'activity',
component: 'input',
showIf: () => false,
props: {
disabled: true,
placeholder: 'please enter activity'
}
},
{
label: '范围1',
prop: 'actRange1',
component: 'select',
showIf: () => true,
props: {
style: {
width: '100%'
},
disabled: false,
placeholder: 'please enter activity'
}
},
{
label: '范围2',
prop: 'actRange2',
showIf: () => true,
slot: 'actRange2'
}
]
}
},
methods: {
async submit () {
const valid = await this.$refs.editForm.validate()
if (!valid) {
return
}
console.log(this.form)
}
}
}
</script>
大致的封装逻辑就这样了，需要加以补充的，依葫芦画瓢就行了~~~
