vue element封装form表单的实现

 更新时间:2023年06月15日 10:13:56   作者:山水有轻音  
本文主要介绍了vue element封装form表单的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一、新建FormComponent.vue

1.梳理思路,form表单有各种类型,常见的有input、select,radio,checkbox,time,date,date-picker,textarea,rate等

<template>
  <el-form ref="form" :model="formData" label-width="80px">
    <el-form-item
      v-for="item in formList"
      :key="item.prop"
      :label="item.label"
      :prop="item.prop"
    >
      <div class="form-item-container">
        <template v-if="item.prefix">
          <span class="prefix">{{ item.prefix }}</span>  --前置单位
        </template>
        <template v-if="item.type === 'input'">
          <el-input
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            :maxlength="item.maxlength"
            @change="handleChange(item.prop, formData[item.prop])"
          />
        </template>
        <template v-if="item.type === 'textarea'">
          <el-input
            type="textarea"
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            :maxlength="item.maxlength"
            @change="handleChange(item.prop, formData[item.prop])"
          />
        </template>
        <template v-if="item.type === 'select'">
          <el-select
            v-model="formData[item.prop]"
            :placeholder="item.placeholder"
            :clearable="item.clearable"
            @change="handleChange(item.prop, formData[item.prop])"
          >
            <el-option
              v-for="option in item.options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </template>
        <!-- 其它表单项同理 -->
        <template v-if="item.suffix">
          <span class="suffix">{{ item.suffix }}</span>  --后置
        </template>
      </div>
      <div class="form-item-unit" v-if="item.unit">{{ item.unit }}</div> --单位
    </el-form-item>
    <div class="form-body" v-if="!$slots.default">
      <slot></slot>
    </div>
    <div class="form-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
    <div class="form-footer" v-else>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-if="showSubmitButton">提交</el-button>
        <el-button @click="onCancel" v-if="showCancelButton">取消</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
export default {
  props: {
    formList: {
      type: Array,
      required: true,
    },
    formData: {
      type: Object,
      default: () => ({}),
    },
    actionUrl: {
      type: String,
      required: true,
    },
    showSubmitButton: {
      type: Boolean,
      default: true,
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleChange(prop, value) {
      this.$emit('update:formData', {
        ...this.formData,
        [prop]: value,
      });
    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$axios.post(this.actionUrl, this.formData).then((res) => {
            this.$emit('submit-success', res);//回调
          });
        } else {
          this.$message.error('请检查表单是否填写正确');
        }
      });
    },
    onCancel() {
      this.$emit('cancel');
    },
  },
};
</script>
<style>
.form-item-container {
  position: relative;
  display: inline-block;
}
.prefix,
.suffix {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
}
.prefix {
  left: 8px;
}
.suffix {
  right: 8px;
}
.form-item-unit {
  display: inline-block;
  margin-left: 8px;
  color: #909399;
}
.form-body {
  margin-bottom: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 20px;
}
.form-footer {
  text-align: right;
  margin-top: 20px;
}
</style>

二、如何使用

引入import formComponent from 'xx';

<template>
  <div>
    <form-component
      :form-list="formList"
      :form-data="formData"
      :action-url="actionUrl"
      :show-submit-button="true"
      :show-cancel-button="true"
      @submit-success="onSubmitSuccess"
      @cancel="onCustomCancel"
      >
      <!-- 自定义表单内容 -->
      <template #default>
        <el-form-item>
          <el-radio-group v-model="formData.gender">
            <el-radio label="male">男性</el-radio>
            <el-radio label="female">女性</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-cascader
            v-model="formData.address"
            :options="addressOptions"
            placeholder="请选择地址"
            @change="handleChange('address', formData['address'])"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formData.email"
            placeholder="请输入电子邮箱"
            clearable
            @change="handleChange('email', formData['email'])"
          />
        </el-form-item>
      </template>
      <!-- 自定义底部按钮,也可以不添加,使用默认底部按钮 -->
      <template #footer>
        <el-button type="primary" @click="onCustomSubmit">提交</el-button>
        <el-button @click="onCustomCancel">取消</el-button>
      </template>
    </form-component>
  </div>
</template>
<script>
import FormComponent from './FormComponent.vue';
export default {
  components: {
    FormComponent,
  },
  data() {
    return {
      formList: [
        {
          label: '姓名',
          prop: 'name',
          type: 'input',
          placeholder: '请输入姓名',
          clearable: true,
          maxlength: 20,
        },
        {
          label: '性别',
          prop: 'gender',
          type: 'select',
          placeholder: '请选择性别',
          clearable: true,
          options: [
            {
              label: '男性',
              value: 'male',
            },
            {
              label: '女性',
              value: 'female',
            },
          ],
        },
        {
          label: '地址',
          prop: 'address',
          type: 'cascader',
          placeholder: '请选择地址',
          clearable: true,
          options: [],
        },
        {
          label: '电子邮箱',
          prop: 'email',
          type: 'input',
          placeholder: '请输入电子邮箱',
          clearable: true,
          maxlength: 50,
        },
      ],
      formData: {
        name: '',
        gender: '',
        address: [],
        email: '',
      },
      addressOptions: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'haidian',
              label: '海淀区',
              children: [
                {
                  value: 'zizhuqiao',
                  label: '紫竹桥',
                },
                {
                  value: 'xizhimen',
                  label: '西直门',
                },
              ],
            },
            {
              value: 'chaoyang',
              label: '朝阳区',
              children: [
                {
                  value: 'guomao',
                  label: '国贸',
                },
                {
                  value: 'cbd',
                  label: 'CBD',
                },
              ],
            },
          ],
        },
        {
          value: 'shanghai',
          label: '上海',
          children: [
            {
              value: 'xuhui',
              label: '徐汇区',
              children: [
                {
                  value: 'xujiahui',
                  label: '徐家汇',
                },
              ],
            },
            {
              value: 'pudong',
              label: '浦东新区',
              children: [
                {
                  value: 'lujiazui',
                  label: '陆家嘴',
                },
              ],
            },
          ],
        },
      ],
      actionUrl: '/api/submit-form',
    };
  },
  methods: {
    onCustomSubmit() {
      // 自定义提交按钮的点击事件
    },
    onCustomCancel() {
      // 自定义取消按钮的点击事件
    },
    onSubmitSuccess(res) {
      // 表单提交成功的回调函数
    },
  },
};
</script>

到此这篇关于vue element封装form表单的实现的文章就介绍到这了,更多相关vue element封装form表单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 使用自定义指令实现表单校验的方法

    vue 使用自定义指令实现表单校验的方法

    今天小编就为大家分享一篇vue 使用自定义指令实现表单校验的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue中如何实时监听本地存储

    vue中如何实时监听本地存储

    这篇文章主要介绍了vue中如何实时监听本地存储,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue中对拿到的数据进行A-Z排序的实例

    Vue中对拿到的数据进行A-Z排序的实例

    今天小编就为大家分享一篇Vue中对拿到的数据进行A-Z排序的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

    vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)

    这篇文章主要介绍了vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程,需要的朋友可以参考下
    2018-01-01
  • Vue组件库Element-常见组件表格示例代码

    Vue组件库Element-常见组件表格示例代码

    对于Element组件的使用,最主要的就是明确自己想要达到的效果,从官网中将对应代码复制粘贴即可,最重要的是要读懂不同组件官网中提供的文档,以便实现自己想要的效果,本文给大家介绍Vue组件库Element-常见组件表格,感兴趣的朋友一起看看吧
    2023-10-10
  • Vue如何动态修改el-table的某列数据

    Vue如何动态修改el-table的某列数据

    这篇文章主要介绍了Vue如何动态修改el-table的某列数据,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 实现v-for循环回来的数据动态绑定id

    vue 实现v-for循环回来的数据动态绑定id

    今天小编就为大家分享一篇vue 实现v-for循环回来的数据动态绑定id,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 一个可复用的vue分页组件

    一个可复用的vue分页组件

    这篇文章主要为大家详细介绍了一个可复用的vue分页组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Vue和relation-graph库打造高质量的关系图应用程序

    Vue和relation-graph库打造高质量的关系图应用程序

    这篇文章主要介绍了Vue和relation-graph库打造高质量的关系图应用程序,在这篇文章中,我们深入探讨了如何使用Vue和relation-graph高效打造关系图,我们详细介绍了数据准备、关系映射、点击事件等关键步骤,需要的朋友可以参考下
    2023-09-09
  • 详解Vue Elememt-UI构建管理后台

    详解Vue Elememt-UI构建管理后台

    本篇文章给大家详细分享了Vue Elememt-UI构建管理后台的过程以及相关代码实例,一起参考学习下。
    2018-02-02

最新评论