对于elementui中from表单的封装

日常使用中封装的一些组件，正常使用可以，没有达到很完美的状态，日常维护吧，有问题的地方不定时修改吧，这个是基于element-admin封装的自己可以随意的更改（我适配了一些权限以及字体大小的功能）

封装常用的表单使用的数据

<template>
  <!-- 表单搜索的组件 -->
  <el-row class="tableform">
    <el-form
      :model="tableform.formdata"
      :rules="tableform.rules"
      ref="ruleForm"
      :label-position="tableform.styledata.position"
      :style="{ width: tableform.styledata.width }"
      @submit.native.prevent
    >
      <!-- 表单内容 -->
      <el-col
        v-for="(item, index) in tableform.formlist"
        :key="index"
        :xs="24"
        :sm="item.width + 12"
        :md="item.width + 4"
        :lg="item.width"
        :xl="item.width"
      >
        <el-form-item
          v-hasPermi="[item.hasPermi]"
          :label-width="item.labelwidth"
          :style="{ fontSize: size + 'px' }"
          :label="item.name"
          :prop="item.id"
          :class="{ disinput: item.disabled }"
        >
          <!-- 输入框，文本框种类0 -->
          <el-input
            :disabled="item.disabled"
            v-if="item.mold === 0"
            v-model.trim="tableform.formdata[item.id]"
            :maxlength="item.max"
            :type="item.type"
            :clearable="item.clearable"
            :placeholder="!item.disabled ? item.plac + item.name : ''"
            :show-word-limit="item.type === 'textarea'"
            :rows="item.rows"
            :autosize="item.type === 'textarea'"
            :show-password="item.type === 'password'"
            :prefix-icon="item.prefix"
            :suffix-icon="item.suffix"
            @clear="changevalue(index)"
            @input="changevalue(index)"
            @keyup.enter.native="btndown('page:table:query')"
          />

          <!-- 下拉菜单种类1 -->
          <el-select
            @change="changevalue(index)"
            :multiple="item.multiple"
            :disabled="item.disabled"
            :collapse-tags="item.multiple"
            :clearable="item.clearable"
            :filterable="item.filterable"
            :multiple-limit="item.multiplelimit"
            v-if="item.mold === 1"
            v-model="tableform.formdata[item.id]"
            :placeholder="!item.disabled ? item.plac + item.name : ''"
          >
            <!-- 下拉菜单选择 -->
            <el-option
              v-for="(ems, ids) in item.list"
              :key="ids"
              :label="ems[item.label]"
              :value="ems[item.value]"
            />
          </el-select>
          <!-- 时间选择器 种类2 -->
          <el-time-picker
            @change="changevalue(index)"
            v-if="item.mold === 2"
            v-model="tableform.formdata[item.id]"
            :placeholder="!item.disabled ? item.plac + item.name : ''"
            :is-range="item.range"
            :disabled="item.disabled"
            :format="item.format"
            :value-format="item.valueformat"
          />
          <!-- 日期选择器 种类3 -->
          <el-date-picker
            @change="changevalue(index)"
            v-if="item.mold === 3"
            :type="item.type"
            v-model="tableform.formdata[item.id]"
            :placeholder="!item.disabled ? item.plac + item.name : ''"
            :disabled="item.disabled"
            :format="item.format"
            :value-format="item.valueformat"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
          <!-- switch开关 种类4 -->
          <el-switch
            @change="changevalue(index)"
            v-if="item.mold === 4"
            :disabled="item.disabled"
            v-model="tableform.formdata[item.id]"
          />
          <!-- 多选 种类5 -->
          <el-checkbox-group
            @change="changevalue(index)"
            v-if="item.mold === 5"
            :disabled="item.disabled"
            v-model="tableform.formdata[item.id]"
          >
            <!-- 多选内容 -->
            <el-checkbox
              v-for="(ems, ids) in tableform.formlist"
              :key="ids"
              :label="ems[item.label]"
            />
          </el-checkbox-group>
          <!-- 单选 种类6 -->
          <el-radio-group
            @change="changevalue(index)"
            v-if="item.mold === 6"
            :disabled="item.disabled"
            v-model="tableform.formdata[item.id]"
          >
            <!-- 单选内容 -->
            <el-radio
              v-for="(ems, ids) in tableform.formlist"
              :key="ids"
              :label="ems[item.label]"
            />
          </el-radio-group>
          <!-- 其他类型传7 -->
          <div v-if="item.mold === 7">
            <slot :datas="item" />
          </div>
        </el-form-item>
      </el-col>
      <!-- 按钮 定位 -->
      <el-form-item class="btn" :class="tableform.styledata.btntype">
        <el-button
          @click="btndown(item.hasPermi)"
          v-for="(item, index) in tableform.btnlist"
          :key="index"
          :type="item.type"
          :icon="item.icon"
          v-hasPermi="[item.hasPermi]"
          :plain="item.plain"
          >{{ item.name }}</el-button
        >
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
import { debtimeout, throttle, setfontsize } from "@/utils";

export default {
  props: {
    // 传入的表单数组配置
    tableform: {
      typeL: [Object],
    },
  },
  data() {
    return {
      size: 0, //字体大小
    };
  },
  created() {
    this.size = setfontsize(this.$ELEMENT.size); //获取字体大小
  },
  methods: {
    // 按钮按下的时候
    btndown(hasPermi) {
      var type = hasPermi.split(":")[2];
      if (type === "query") {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            this.$emit("changetype", type);
          } else {
            return false;
          }
        });
      } else {
        throttle(500).then(() => {
          this.$emit("changetype", type);
        });
      }
    },
    // form的值改变的时候触发
    changevalue(type) {
      debtimeout(500).then(() => {
        this.$emit("change", this.tableform.formdata, type);
      });
    },
  },
};
</script>

有些节流防抖的就没放这里，等哪天专门写一篇封装的方法
一些参数大家看elementui官方就行

接下来就是使用方法

引入一个json配置就行，因为比较多，注意的是，json文件的修改是全局的，如果多个地方使用的话要记得深拷贝一下**JSON.parse(JSON.stringify(json文件)**这样就行

<template>
  <div >
     <!-- 表单内容 -->
     <tableform :tableform="listform" @changetype="changetype" />
  </div>
</template>

<script>
//表单内容
import { listform } from "../../../assets/json/route/from.json";

export default {
  data() {
    return {
      listform: listform
    };
  },
  methods: {
    // 表单按钮
    changetype(e) {
      if (e === "query") {
        //这里写一下表单的方法
      } 
    },
   
};
</script>

传入的json是这样

可能有点麻烦，但开发速度开始会节省一点，毕竟ctrl+c,ctrl+v

{
    "listform": {
    //这里就是表单数组
        "formlist": [
            {
                "id": "saleNum",
                "name": "合同编号",
                "disabled": false,
                "mold": 0,
                "max": -1,
                "plac": "请输入",
                "type": "text",
                "clearable": true,
                "rows": 1,
                "prefix": "",
                "suffix": "",
                "width": 6,
                "labelwidth": "80px",
                "hasPermi": ""
            },
            {
                "id": "deptIds",
                "name": "部门",
                "disabled": false,
                "multiple": true,
                "clearable": true,
                "collapse": false,
                "plac": "请选择",
                "filterable": false,
                "mold": 7,
                "list": [],
                "multiplelimit": 0,
                "label": "dictLabel",
                "value": "dictValue",
                "width": 6,
                "labelwidth": "80px",
                "hasPermi": "orderform:manage:replaceDept"
            }
        ],
        //这里是表单数组
        "formdata": {
            "pageNum": 1,
            "pageSize": 10,
            "taskNum": null,
            "deptIds":null
        },
        //这里是按钮数组
        "btnlist": [
            {
                "icon": "el-icon-search",
                "type": "primary",
                "name": "搜索",
                "plain": false,
                "hasPermi": "orderform:manage:query",
                "round": false
            }
        ],
        //这里是表单样式的一些配置
        "styledata": {
            "position": "left",
            "width": "100%",
            "btntype": "right bottom"
        },
        //这里是正则
        "rules": {}
    },
}

就是这样，下班！！！