表单组件封装 elForm.vue文件
<template>
<el-form
ref="form"
:inline="inline"
:label-width="labelWidth"
class="datafill-elform"
:model="baseData"
:rules="rules"
@keyup.enter.native="dataFormSubmit(baseData)"
>
<el-row>
<el-col>
<el-form-item v-for="item in baseForm" :key="item.prop" :prop="item.prop" :label="item.label" :required="item.required">
<!-- 输入框 -->
<el-input v-if="item.type==='Input'" v-model="baseData[item.prop]" class="input" :type="item.inputType?item.inputType:'text'" :rows="6" :disabled="item.disabled" :clearable="item.clearable" :placeholder="item.placeholder" />
<span class="itemunit">{{ item.unit }}</span>
<!-- 下拉框 -->
<el-select v-if="item.type==='Select'" v-model="baseData[item.prop]" :placeholder="item.placeholder" :clearable="item.clearable" @change="item.change(baseData[item.prop])">
<el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value" />
</el-select>
<!-- 单选 -->
<el-radio-group v-if="item.type==='Radio'" v-model="baseData[item.prop]" @change="radioChange">
<el-radio v-for="ra in item.radios" :key="ra.value" :label="ra.value">{{ ra.label }}</el-radio>
</el-radio-group>
<!-- 复选框 -->
<el-checkbox-group v-if="item.type==='Checkbox'" v-model="baseData[item.prop]">
<el-checkbox v-for="ch in item.checkboxs" :key="ch.value" :label="ch.value">{{ ch.label }}</el-checkbox>
</el-checkbox-group>
<!-- 日期 -->
<el-date-picker
v-if="item.type==='Date'"
v-model="baseData[item.prop]"
:type="item.dateType?item.dateType:'date'"
:placeholder="item.placeholder"
range-separator="到"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
<!-- 按钮 -->
<el-form-item v-for="item in searchHandle" :key="item.label">
<el-button :class="item.class" round :type="item.type" @click.native.prevent="item.handle()">{{ item.label }}</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
<script>
export default {
name: '',
props: {
inline: {
type: Boolean,
default: false
},
labelWidth: {
type: String,
default: '160px'
},
baseForm: {
type: Array,
default: () => []
},
baseData: {
type: Object,
default: () => {}
},
searchHandle: {
type: Array,
default: () => []
},
rules: {
type: Object,
default: () => {}
}
},
data() {
return {
}
},
methods: {
radioChange(val) {
this.$emit('radioChange', val)
},
dataFormSubmit(form) {
this.$emit('dataFormSubmit', form)
}
}
}
</script>
main.js里全局引用
import BaseElform from '@/components/base-form/elForm'// 基础表单
Vue.component('BaseElform', BaseElform)
文件里直接引用该组件
<template>
<base-elform
ref="dataForm1"
class="baseelform"
:base-form="baseForm"
:base-data="dataForm"
:rules="dataRules"
@dataFormSubmit="dataFormSubmit"
/>
</template>
<script>
export default {
const hasorno = [{ label: '南区', value: '1' }, { label: '北区', value: '0' }]
const Props = { label: 'label', value: 'value' }
const paytypecheckbox = [{ label: '支付宝', value: '0' }, { label: '微信', value: '1' }, { label: '银联', value: '2' }, { label: '现金', value: '3' }]
const dataRule = { required: true, message: '该项为必填项', trigger: 'blur' }
data(){
dataForm: {
service: '',
resnumber: '',
type: '',
brand: '',
paytype: []
},
baseForm: [
{ type: 'Radio', label: '所在区域', prop: 'service', radios: hasorno },
{ type: 'Input', label: '餐饮店名称', prop: 'resnumber', clearable: true },
{ type: 'Select',
prop: 'type',
label: '餐饮店类型',
options: [
{
label: '自助餐',
value: '0'
},
{
label: '快餐小吃',
value: '1'
},
{
label: '品牌连锁',
value: '2'
},
{
label: '其他',
value: '3'
}
],
props: Props,
change: row => {
console.log(row)
}
},
{ type: 'Select',
label: '餐饮店标签',
prop: 'brand',
options: [
{
label: '线上购物',
value: '0'
},
{
label: '同城同价',
value: '1'
},
{
label: '国营',
value: '2'
},
{
label: '其他',
value: '3'
}
],
props: Props,
change: row => {
console.log(row)
}
},
{ type: 'Checkbox', label: '支付方式', prop: 'paytype', checkboxs: paytypecheckbox, props: Props }
],
dataRules: {
service: [dataRule],
resnumber: [dataRule],
type: [dataRule],
brand: [dataRule],
paytype: [dataRule]
}
},
methods: {
dataFormSubmit() {
this.$refs.dataForm1.$refs.form.validate((valid) => {
if (valid) {
console.log('通过了正则验证')
}
})
}
}
}
</script>
页面最终效果
如果是查询搜索的代码块如下
<template>
<base-elform
label-width="0"
:inline="true"
:base-data="searchForm"
:base-form="baseForm"
:search-handle="searchHandle"
/>
</template>
<script>
export default {
data(){
// 表单参数
const Props = { label: 'label', value: 'value' }
return {
// 查询表单
searchForm: {
service: '',
camera: '',
brand: '',
date: ''
},
baseForm: [
{ type: 'Select',
placeholder: '请选择服务区',
prop: 'service',
options: [{ label: '上行（北区）', value: '0' }, { label: '下行（南区）', value: '1' }],
props: Props,
change: row => {
console.log(row)
}
},
{ type: 'Select',
placeholder: '请选择餐饮店类型',
prop: 'type',
options: [
{
label: '自助餐',
value: '0'
},
{
label: '快餐小吃',
value: '1'
},
{
label: '品牌连锁',
value: '2'
},
{
label: '其他',
value: '3'
}
],
props: Props,
change: row => {
console.log(row)
}
},
{ type: 'Select',
placeholder: '请选择餐饮标签',
prop: 'brand',
options: [
{
label: '线上购物',
value: '0'
},
{
label: '同城同价',
value: '1'
},
{
label: '国营',
value: '2'
},
{
label: '其他',
value: '3'
}
],
props: Props,
change: row => {
console.log(row)
}
},
{
type: 'Date',
placeholder: '请选择添加日期',
prop: 'date',
clearable: true
}
],
searchHandle: [
{ label: '搜索',
class: 'searchButton',
handle: () => {
this.getDataList()
}
},
{ label: '新增',
class: 'addButton',
type: 'primary',
handle: () => {
this.addOrUpdateHandle()
}
}
],
}
}
}
</script>
页面效果
