vue2 二次封装 element --- el-form 表单自定义组件

一、form组件

<template>
    <div ref="searchHeader" class="div_search search_title" style="padding-right: 10px">
      <el-form ref="dataForm" :model="formObj" label-position="left" label-width="84px">
        <el-row v-for="(rows,i) in conf.fromItems" :key="rows[i].key">
          <el-col v-for="cols in rows" :key="cols.key" :span="cols.colspan">
            <el-form-item :label="cols.label" :label-width="cols.labelWidth" class="div_item input_search">
　　　　　　　　 <!--  TODO    slot      -->
              <slot :name="cols.type"></slot>
              <!--  TODO    el-input      -->
              <el-input v-if="cols.type==='input' || cols.type=== 'text'"
                        style="width: 200px;"
                        :type="cols.type"
                        v-model="formObj[cols.key]"
                        :placeholder="cols.placeholder"
                        :maxlength="cols.maxlength"
                        show-word-limit>
              </el-input>
              <!--   TODO   el-select       -->
              <el-select v-else-if="cols.type==='select'"
                         style="width: 200px;"
                         clearable v-model="formObj[cols.key]">
                <el-option value label="全部"></el-option>
                <el-option v-for="[key, value] of cols.option" :value="key" :label="value" :key="key"></el-option>
              </el-select>
              <!--  TODO   el-date-picker      -->
              <el-date-picker
                v-if="cols.type==='year'|| cols.type==='date'||  cols.type==='datetime'|| cols.type === 'daterange'"
                class="input_search"
                v-model="formObj[cols.key]"
                :value-format="cols.valueFormat"
                :format="cols.format"
                :type="cols.type"
                placeholder="开始日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <div class="left">
              <el-button @click="getList" class="button_search" size="medium" type="primary">查询</el-button>
            </div>
          </el-col>
          <slot></slot>
        </el-row>
      </el-form>
    </div>
</template>

<script>
  import OrgTree from "@/views/components/OrgTree/index.vue";
  export default {
    name: 'meQueryForm',
    components: {
      OrgTree
    },
    data(){
      return {
        formObj:{},
        rules:''
      }
    },
    props:{
      conf:{
        type:Object
      }
    },
    watch:{
      conf: {
        handler(newVal, oldVal) {
          newVal.fromItems.forEach( rows =>{
            rows.forEach( item => {
              this.$set(this.formObj,item.key,item.default)
            })
          })
        },
        immediate: true,
      }
    },
    methods:{
      getList(){
        this.$emit('getList',this.formObj)
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "~@/assets/fourth/common.css";
</style>

二、form 自定义数据

import { WORKFLOW_DELAY_STATUS_TYPE_MAP } from "@/utils/dic.js";
import moment from "moment";

/**
 * @param {string} label 标题
 * @param {number,string,Array,Object,Boolean} default 默认值
 * @param {string} key  v-model 绑定字段 字段不能重复
 * @param {string} string
 * @param {string} type
 * @param {string} colspan
 * @param {Array} option  select 下拉的数据
 * @param {Boolean}
 * @param  插槽slot  必须需要加key
 */
let datalist =  new Map([
  ['0', '正常'],
  ['1', '停用'],
])
export default {
  title : '查询',
  fromItems: [
    [
      {colspan:4.5,label:'所属机构', labelWidth:'80px', default:'', key:'orgId', placeholder:'', type:'org'},
      {colspan:4.5,label:'所属部门', labelWidth:'80px', default:'', key:'department', placeholder:'', type:'department'},
      {colspan:4.5, label:'开始日期', labelWidth:'80px', default:moment(new Date()).format("YYYY-01-01 00:00:00"), key:'startTime', placeholder:'', type:'date',valueFormat:'yyyy-MM-dd 00:00:00',format:'yyyy-MM-dd'},
      { colspan:4.5,label:'结束日期', labelWidth:'80px', default:moment(new Date()).format("YYYY-MM-DD 23:59:59"), key:'endTime', placeholder:'', type:'date', valueFormat:'yyyy-MM-dd 00:00:00',format:'yyyy-MM-dd'},
      {colspan:4.5,label:'审批状态', labelWidth:'100px', default:'', key:'approvalStatus',  placeholder:'',  type:'select', maxlength:'14', option:WORKFLOW_DELAY_STATUS_TYPE_MAP },
      {colspan:4.5,label:'状态', labelWidth:'100px', default:'0', key:'status',  placeholder:'',  type:'select', maxlength:'14', option:datalist },
    ]
  ]
}

三、引入form组件

 <me-query-form ref="form" :conf="conform" @getList="getLists">
          <template v-slot:org>
               <org-tree @get-orgid="changeOrg"></org-tree>
          </template>
          <template v-slot:department>
            <department-options-tree
              :appendToBody="true"
              :departmentId.sync="searchQuery.departmentIds"
              :multiple="true"
              :isAll="true"
              :flat="true"
              :treeDepartmentId="searchQuery.departmentid"
              :orgId="searchQuery.orgId"
            ></department-options-tree>
          </template>
  </me-query-form>

  import MeQueryForm from '../../../../components/meForm/meQueryForm'; // form自定义组件
  import conform from './formData';  // form自定义数据

　export default {
    components: {
      MeQueryForm,
      OrgTree,
      DialogFlowDetail,
      DialogEdit
    },
    data() {
        return {
            conform
        }
    },
    methods: {
       getLists(form){
            let {startTime,endTime,status,approvalStatus} = form
            this.searchQuery.startTime = startTime
            this.searchQuery.endTime = endTime
            this.searchQuery.status = status
            this.searchQuery.approvalStatus = approvalStatus
            this.getList(1) //列表
     　},
    }
　}