vue+elementui 表单封装

表单组件封装 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>

页面效果