Vue Element表单绑定（一）

最新推荐文章于 2024-07-28 17:38:47 发布

转载最新推荐文章于 2024-07-28 17:38:47 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tianma3798/blog/3010082

文章标签：

#javascript #前端 #python #ViewUI

本文详细介绍Vue中使用Element UI进行表单双向绑定的方法，包括行内表单的数据提交及表单验证处理。通过示例代码，展示了如何实现表单数据的动态增删和验证规则的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

一、在Vue 中使用表单的双向绑定，提交按钮获取表单数据示例

1.vue 视图

<template>
  <div>
    <h3>行内表单</h3>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="审批人">
        <el-input v-model="formInline.user" placehoder="请输入审批人"></el-input>
      </el-form-item>
      <el-form-item label="活动区域">
        <el-select v-model="formInline.region" placeholer="活动区域">
          <el-option label="上海" value="shanghai"></el-option>
          <el-option label="北京" value="beijing"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

2.js代码

export default {
  data() {
    return {
      formInline: {}
    };
  },
  methods: {
    onSubmit() {
      //打印表单数据
      console.info(this.formInline);
    }
  }
};

3.打印获取的表单数据

二、表单提交前验证处理,动态增加表单项处理

<template>
  <el-form :model="dynamicForm" ref="dynamicForm" label-width="100px" class="demo-form">
    <el-form-item
      prop="email"
      label="邮箱"
      :rules="[
        {required:true,message:'请输入邮箱地址'},
        {type:'email',message:'邮箱格式不真确'}
        ]"
    >
      <el-input v-model="dynamicForm.email"></el-input>
    </el-form-item>
    <el-form-item
      v-for="(domain,index) in dynamicForm.domains"
      :label="'域名'+index"
      :key="domain.key"
      :prop="'domains.' + index + '.value'"
      :rules="[
        {required:true,message:'域名不能空',trigger:'blur'}
        ]"
    >
      <el-input v-model="domain.value"></el-input>
      <el-button @click.prevent="removeDomain(domain)">删除</el-button>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="submitForm('dynamicForm')">提交</el-button>
      <el-button @click="addDomain">新增域名</el-button>
      <el-button @click="resetForm('dynamicForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>

js代码示例：

export default {
  data() {
    return {
      dynamicForm: {
        domains: [{ value: "" }],
        email: ""
      }
    };
  },
  methods: {
    //提交
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert(JSON.stringify(this.dynamicForm));
        } else {
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //增加域名项
    addDomain() {
      this.dynamicForm.domains.push({
        value: "",
        key: Date.now()
      });
    },
    //删除域名项
    removeDomain(item) {
      var index = this.dynamicForm.domains.indexOf(item);
      if (index != -1) {
        this.dynamicForm.domains.splice(index, 1);
      }
    }
  }
};

Vue Element表单绑定（三）表单验证2

Vue Element表单绑定（二）表单验证1

Vue Element表单绑定（一）

转载于:https://my.oschina.net/tianma3798/blog/3010082