封装 element-ui 的 Form表单

最新推荐文章于 2024-06-20 14:26:09 发布
最新推荐文章于 2024-06-20 14:26:09 发布
阅读量1.7k 收藏 17
点赞数 5
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42863549/article/details/116167827
版权

2021/08/13更新，添加了 placeholder 自定义提示

# 新建 Form.vue

src/components/Form.vue

<template>
  <div>
    <el-form
      ref="form"
      :model="form"
      :inline="inline"
      :rules="rules"
      :label-width="labelWidth"
      class="form"
    >
      <el-form-item
        :label="item.title"
        :prop="item.key"
        v-for="item in options"
        :key="item.key"
      >
        <div v-if="$slots[item.key]">
          <slot :name="item.key"></slot>
        </div>
        <div v-else>
          <el-input
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'text'"
            :placeholder="
              item.placeholder ? item.placeholder : '请输入' + item.title
            "
            :disabled="item.disabled"
            clearable
          ></el-input>
          <el-input
            :size="size"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 6 }"
            :placeholder="
              item.placeholder ? item.placeholder : '请输入' + item.title
            "
            v-model="form[item.key]"
            v-if="item.type === 'textarea'"
            :disabled="item.disabled"
          >
          </el-input>
          <el-switch
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'switch'"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :disabled="item.disabled"
          >
          </el-switch>
          <el-time-picker
            :size="size"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            v-model="form[item.key]"
            value-format="HH:mm:ss"
            v-if="item.type === 'time'"
            :disabled="item.disabled"
          >
          </el-time-picker>
          <el-date-picker
            type="date"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy-MM-dd"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'date'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            type="datetime"
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'datetime'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'date-to-date'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-date-picker
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'datetime-to-datetime'"
            :disabled="item.disabled"
          ></el-date-picker>
          <el-input-number
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'number'"
            :disabled="item.disabled"
          ></el-input-number>
          <el-select
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'select'"
            clearable
            :placeholder="
              item.placeholder ? item.placeholder : '请选择' + item.title
            "
            :disabled="item.disabled"
          >
            <el-option
              v-for="data in item.option.data"
              :key="data[item.option.props.key]"
              :label="data[item.option.props.label]"
              :value="data[item.option.props.value]"
            >
            </el-option>
          </el-select>
          <el-cascader
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'cascader'"
            :disabled="item.disabled"
            :options="item.option.data"
            :props="item.option.props"
            clearable
          ></el-cascader>
          <el-radio-group
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'radio'"
            :disabled="item.disabled"
          >
            <el-radio
              v-for="data in item.option.data"
              :key="data[item.option.props.key]"
              :label="data[item.option.props.value]"
              >{{ data[item.option.props.label] }}</el-radio
            >
          </el-radio-group>
          <el-checkbox-group
            :size="size"
            v-model="form[item.key]"
            v-if="item.type === 'checkbox'"
            :disabled="item.disabled"
          >
            <el-checkbox
              v-for="data in item.option.data"
              :key="data[item.option.props.key]"
              :label="data[item.option.props.label]"
              >{{ data[item.option.props.label] }}</el-checkbox
            >
          </el-checkbox-group>
          <el-upload
            v-if="item.type === 'file'"
            action="/api/upload_ajax"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :disabled="item.disabled"
          >
            <img
              v-if="form[item.key]"
              :src="form[item.key]"
              alt=""
              style="width: 178px; height: 178px; border-radius: 6px;"
              @click="setFileKey(item.key)"
            />
            <i
              v-else
              class="el-icon-plus avatar-uploader-icon"
              @click="setFileKey(item.key)"
            ></i>
          </el-upload>
        </div>
      </el-form-item>
      <slot name="options"></slot>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    // 表单
    form: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // 表单配置
    options: {
      type: Array,
      default: function() {
        return [];
      }
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: function() {
        return {};
      }
    },
    // 是否行内表单
    inline: {
      type: Boolean,
      default: function() {
        return false;
      }
    },
    // 表单表头宽度
    labelWidth: {
      type: String,
      default: function() {
        return "80px";
      }
    },
    // 控件大小
    size: {
      type: String,
      default: function() {
        return "medium";
      }
    }
  },
  data() {
    return {
      fileKey: ""
    };
  },
  mounted() {
    // 动态添加验证
    this.addRules(this.options);
    // 初始化完成清除一下表单验证规则
    this.$nextTick(function() {
      this.clearValidate();
    });
  },
  methods: {
    /**
     * @description: 动态添加表单验证
     * @author: chenbz
     * @date: 2021/4/27
     */
    addRules(options) {
      for (let i = 0; i < options.length; i++) {
        // 判断是否需要添加验证
        if (options[i].rules) {
          // 判断用户是否已经自定义验证了
          if (!this.rules[options[i].key]) {
            // 动态生成验证方法
            let data = [
              {
                required: true,
                message: "",
                trigger: ""
              }
            ];
            // 动态添加验证方式：失去焦点触发/确认时触发
            if (options[i].type === ("input" || "text")) {
              data[0].message = "请输入" + options[i].title;
              data[0].trigger = "blur";
            } else {
              data[0].message = "请选择" + options[i].title;
              data[0].trigger = "change";
            }
            // 触发vue更新
            this.$set(this.rules, options[i].key, data);
          }
        }
      }
    },
    /**
     * @description: 表单验证
     * @author: chenbz
     * @date: 2021/5/10
     */
    validate() {
      let isValidate = false;
      this.$refs.form.validate(valid => {
        if (valid) {
          isValidate = true;
        }
      });
      return isValidate;
    },
    /**
     * @description: 清除表单验证
     * @author: chenbz
     * @date: 2021/5/18
     */
    clearValidate() {
      this.$refs.form.clearValidate();
    },
    setFileKey(key) {
      // console.log(key);
      this.fileKey = key;
    },
    handleAvatarSuccess(res, file) {
      // console.log(res);
      // console.log(file);
      file;
      this.form[this.fileKey] = res.data;
    }
  }
};
</script>

<style scoped>
>>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

>>> .el-upload:hover {
  border-color: #409eff;
}
</style>


# 引入页面

src/views/home.vue

<template>
  <div>
    <div>
      <MyForm
        :form="formData.form"
        :inline="true"
        :options="formData.options"
        :rules="formData.rules"
        :labelWidth="formData.labelWidth"
      ></MyForm>
      <el-divider></el-divider>
      <MyForm
        :form="formData.form"
        :options="formData.options"
        :rules="formData.rules"
        :labelWidth="formData.labelWidth"
      ></MyForm>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import MyForm from "@/components/Form.vue";
export default {
  name: "home",
  components: {
    MyForm
  },
  data() {
    return {
      formData: {
        form: {
          date: "",
          sex: "",
          name: ""
        },
        options: [
          {
            title: "日期",
            key: "date",
            type: "date",
            rules: true
          },
          {
            title: "性别",
            key: "sex",
            type: "select",
            option: {
              data: [
                {
                  id: 1,
                  title: "女",
                  type: 0
                },
                {
                  id: 2,
                  title: "男",
                  type: 1
                }
              ],
              props: {
                key: "id", // 指定key对应data的字段
                label: "title", // 指定label对应data的字段
                value: "type" // 指定value对应data的字段
              }
            }
          },
          {
            title: "名字",
            key: "name",
            type: "input",
            rules: true
          }
        ],
        rules: {},
        labelWidth: "80px"
      }
    };
  },
  mounted() {},
  methods: {
  }
};
</script>

<style scoped></style>


# 自定义图片上传

Home.vue

src/views/Home.vue

<template>
  <div>
    <div>
      <MyForm
        :form="formData.form"
        :options="formData.options"
        :rules="formData.rules"
        :labelWidth="formData.labelWidth"
      >
        <template slot="options">
          <el-form-item label="文件上传">
            <el-upload
              action=""
              :show-file-list="false"
              :on-change="handleChange"
              :auto-upload="false"
            >
              <img v-if="formData.form.img" :src="formData.form.img" alt="" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </template>
      </MyForm>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import MyForm from "@/components/Form.vue";
export default {
  name: "Home",
  components: {
    MyForm
  },
  data() {
    return {
      formData: {
        form: {
          date: ""
        },
        options: [
        ],
        rules: {},
        labelWidth: "80px"
      }
    };
  },
  mounted() {},
  methods: {
    handleChange(file, fileList) {
      fileList;
      this.formData.form.img = URL.createObjectURL(file.raw);
    }
  }
};
</script>

<style></style>

使用 template 包含自定义的内容，slot一定要是options

上传组件根据业务而定，我预留了一个slot插槽用来显示自定义的组件



# 参数说明
属性描述默认值必需
formform表单{}是
options表单配置[]是
inline是否开启行内表单false否
rules表单验证规则{}否
labelWidth表单表头宽度80px否
size控件大小medium否


# options
属性描述必需
title表单表头是
key表单对应的字段是
type控件类型是
rules是否开启验证否
option表单配置否
disabled是否禁用否
placeholder自定义提示否


# type
属性描述
input输入框
text文本输入框
switch开关
time时间
date日期
datetime日期时间
date-to-date开始日期 — 结束日期
datetime-to-datetime开始日期时间 — 结束日期时间
number数字
select选择框
cascader联级选择框
radio单选框
checkbox多选框
file图片上传

checkbox绑定字段的值一定要是: []

例如：sex: []



# option

只有在type为[select, cascader, radio, checkbox]时才需要设置

属性描述必需
data数据源是
props配置是


# props

type为[cascader] 的配置可以直接看官网

属性描述必需
Key指定唯一字段是
label指定显示标题字段是
value指定选中后值字段是


# 方法
属性描述回调函数
validate()表单验证isValidate
clearValidate()清除表单验证


# 效果图



# 更多表单

Home.vue

src/views/Home.vue

<template>
  <div>
    <div>
      <MyForm
        :form="formData.form"
        :options="formData.options"
        :rules="formData.rules"
        :labelWidth="formData.labelWidth"
      >
      </MyForm>
      <el-divider></el-divider>
    </div>
  </div>
</template>

<script>
import MyForm from "@/components/Form.vue";
export default {
  name: "home",
  components: {
    MyForm
  },
  data() {
    return {
      formData: {
        form: {
          input: "",
          text: "",
          switch: true,
          time: "10:10:10",
          date: "2021-04-27",
          datetime: "2021-04-27 10:10:10",
          "date-to-date": "",
          "datetime-to-datetime": "",
          number: 0,
          select: "",
          radio: "",
          checkbox: []
        },
        options: [
          {
            title: "输入框",
            key: "input",
            type: "input"
          },
          {
            title: "文本",
            key: "text",
            type: "text"
          },
          {
            title: "开关",
            key: "switch",
            type: "switch"
          },
          {
            title: "时间",
            key: "time",
            type: "time"
          },
          {
            title: "日期",
            key: "date",
            type: "date"
          },
          {
            title: "日期时间",
            key: "datetime",
            type: "datetime"
          },
          {
            title: "开始日期 --- 结束日期",
            key: "date-to-date",
            type: "date-to-date"
          },
          {
            title: "开始日期时间 --- 结束日期时间",
            key: "datetime-to-datetime",
            type: "datetime-to-datetime"
          },
          {
            title: "数字",
            key: "number",
            type: "number"
          },
          {
            title: "选择框",
            key: "select",
            type: "select",
            option: {
              data: [
                {
                  id: 1,
                  title: "女",
                  type: 0
                },
                {
                  id: 2,
                  title: "男",
                  type: 1
                }
              ],
              props: {
                key: "id", // 指定key对应data的字段
                label: "title", // 指定label对应data的字段
                value: "type" // 指定value对应data的字段
              }
            }
          },
          {
            title: "单选框",
            key: "radio",
            type: "radio",
            option: {
              data: [
                {
                  id: 1,
                  title: "女",
                  type: 0
                },
                {
                  id: 2,
                  title: "男",
                  type: 1
                }
              ],
              props: {
                key: "id", // 指定key对应data的字段
                label: "title", // 指定label对应data的字段
                value: "type" // 指定value对应data的字段
              }
            }
          },
          {
            title: "多选框",
            key: "checkbox",
            type: "checkbox",
            option: {
              data: [
                {
                  id: 1,
                  title: "1"
                },
                {
                  id: 2,
                  title: "2"
                },
                {
                  id: 3,
                  title: "3"
                }
              ],
              props: {
                key: "id", // 指定key对应data的字段
                label: "title", // 指定label对应data的字段
              }
            }
          }
        ],
        rules: {},
        labelWidth: "250px"
      }
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style></style>


# 效果图

Snipaste_2021-04-27_16-51-19

实习打字猿
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue Element-ui Form表单使用
weixin_43639373的博客
10-08 4639
Vue Element-ui Form表单使用 在面对项目中大量的表单提交以及规则验证，Element-ui Form表单是我们最好的帮手，下面介绍一下form表单的使用方法以及规则校验的封装。 el-form 为了将所有表单的规则校验封装在一起 我们需要在el-form加rules属性，rules可以在data当中定义一个全局的变量。 以上代码将所有表单的验证规则写在一起，带有validat...
vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容
weixin_55103282的博客
10-18 311
在methods:中写： //检查手机号 isCellPhone(val) { if (!/^1(3|4|5|6|7|8)\d{9}$/.test(val)) { return false; } else { return true; } }, 需要验证手机写的是 element框架中prop="phone"验证规则 <el-form-item label="手机号" prop="phone"&g
二次聚合封装elementui的formtable组件实现数据驱动视图
08-12
二次聚合封装element-ui的form、table组件、实现数据驱动视图
封装一个elementui的form组件
m0_46239267的博客
05-29 728
Vue封装一个elementui的form组件
vue3 基于element-plus 封装form表单
最新发布
wancaicai_的博客
06-20 285
【代码】vue3 基于element-plus 封装form表单。
简易封装 element form表单
weixin_67791604的博客
06-14 1203
简易封装element form表单
基于elementUi封装的表单组件
山岗下的星空的博客
12-10 1815
前言：本文章是vue中因为公司的项目页面牵扯到大量的表单，从而诞生，组件的源代码我会放到文章最后，文章写的可能不好，但是组件我觉得还是不错的,可以大幅度的提高开发页面的效率，有问题可以及时探讨QQ：1582340991 功能 提交校验，输入文本框校验，单个禁用，全局禁用，日期的区间选择，下拉框或者选择框选中某个特定的值其他文本框显示或者隐藏，远程搜索框，插槽 使用示例小demo vue页面的配置 参数 释义 data 获取参数值 fields 动态配置表单js all-disable
mcommon:基于element-ui封装的form表单和table
05-21
用法 基于element-ui封装的form表单和table npm install @hanyk/mcommon import Vue from 'vue' import mcommon from '@hanyk/mcommon' Vue.use(mcommon)
vue3Util:基于vue3 element-plus form表单二次封装
05-05
5. **Form表单组件**：Vue3Util可能会包含一个自定义的Form组件，这个组件可能集成了Element Plus的Form，并增加了自动绑定、验证、提交等功能，使得开发者可以更简单地创建和管理表单。 6. **自定义验证规则**：...
elsa:elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，用于快速开发后台管理页面
05-09
:high_voltage: elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，适用于快速开发后台管理项目。 用法示例，见： Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...
element ui表单必填_element-ui Form表单校验小结及踩坑
weixin_39602967的博客
12-29 1871
1、要验证输入只能为数字时、方法一如果使用type=“number”样式这边去掉type=number时自带的属性/*去除webkit中input的type="number"时出现的上下图标*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}input[type...
基于elementui的form表单实现的一个高拓展性的表格布局组件
08-10
基于element-ui 的form表单实现的一个高拓展性的表格布局组件，能够用于日常使用表单的布局实现。
elementUI表单封装
qq_34442584的博客
08-04 1048
elementUI表单封装根据项目需要封装elementUI表单html代码js代码使用 根据项目需要封装elementUI表单 html代码 <template> <!--是否行内表单--> <el-form ref="form" :inline="inline" :model="formObj.form" :label-width="labelWidth" :rules="formObj.rules" class="elform"> <!--标签
Vue2+ElementUI表单、Form组件的封装
qq_43657722的博客
03-12 1904
在 Vue2 项目中，ElementUI 的 `el-form` 组件是常用的表单组件。它提供了丰富的功能和样式，可以满足各种需求。但是，在实际开发中，我们经常会遇到一些重复性的需求
form组件的封装（element ui ） 简单版本
每天都要努力学习哦~~
09-22 729
通过封装通用组件，我们可以在Vue.js应用中轻松地实现重复使用的功能，提高开发效率并减少重复工作。通用表单组件是一个很好的例子，它可以根据不同的需求进行配置，使其适用于多种情况。希望本文对你理解如何创建和使用Vue.js组件有所帮助！
表单el-form的封装-element-ui
qq_46199553的博客
06-01 436
el-form
【ElementUI组件封装】搭建架子、按钮自行封装、封装element的表格、表单
前端知识分享喵
07-21 1016
有了前面封装表单的基础，要是顺手把表格也做一番封装，那么我们在处理这类增删改查页面的时候，就能节省出更多的时间去处理其它的事情，从而提高开发效率。像：后台管理系统的页面有一些表单增删改操作，这里面的控件名称和所用到的控件不一样外，逻辑大体相同。明明人家已经提供了相对完善的 UI 组件库、并且大部分想要的效果都已经有了，我们是没有必要再去浪费时间在这个上面的，应该更多的去关注业务逻辑的实现。像表格数据配置、操作列的、批量处理的、分页的、列数据个性化的等等，太多了就不一一列举了。
基于Element-UI的form表单封装
qq_43724295的博客
07-23 1377
1.创建公共子组件/src/component/form.vue template里边 <!-- 详细参照elementui官网：https://element.eleme.io/#/zh-CN/component/form#form-item-methods --> <!-- 表单属性解释 1.model：表单数据对象 2.rules：表单验证规则 3.ref：表单名称 4.label-width：标签宽度--> <!-..
form表单的三种封装方法（Vue+ElementUI）
WY_ALA的博客
10-16 3018
这里的要点主要有： 监听表单组件的数据变化： 每个表单组件都有一个name标识它的业务含义，绑定的数据也是formData[field.name]，@input事件传递updateForm，在updateForm里面更新this.formData[name]，保证了this.formData里面的数据是和表单组件选择/填写的内容一致。重置时改变表单组件的数据： 因为组件内部会监听父元素的value，所以这里只要清空this.formData的值，组件内部的数据也会跟着清空。
element-ui表单手机号正则
09-06
- *1* *2* *3* [vue封装 element-ui form表单验证 正则匹配手机号 自定义校验表格内容](https://blog.csdn.net/qq_45619095/article/details/108392282)[target="_blank" data-report-click={"spm":"1018.2226.3001....
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值