elementplus中form表单的使用及讲解---快速上手

owensweat

已于 2022-06-22 20:53:04 修改

阅读量8.7k

点赞数 8

分类专栏： vue 文章标签： elementui vue.js javascript

于 2022-05-02 17:24:48 首次发布

本文链接：https://blog.youkuaiyun.com/qq_56263094/article/details/124542633

版权

vue 专栏收录该内容

9 篇文章

订阅专栏

1.初识elementplus的form表单

1.ref和reactive的区别

2.vue3新特性双向绑定 v-model

2.快速使用form表单校验

1.使用自带的表单校验

2.自定义表单校验器

3. elementplus的form表单总结

贴一个elementplus的官网Form 表单 | Element Plus (element-plus.org)

1.初识elementplus的form表单

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="Activity time">
      <el-col :span="11">
        <el-date-picker
          v-model="form.date1"
          type="date"
          placeholder="Pick a date"
          style="width: 100%"
        />
      </el-col>
      <el-col :span="2" class="text-center">
        <span class="text-gray-500">-</span>
      </el-col>
      <el-col :span="11">
        <el-time-picker
          v-model="form.date2"
          placeholder="Pick a time"
          style="width: 100%"
        />
      </el-col>
    </el-form-item>
    <el-form-item label="Instant delivery">
      <el-switch v-model="form.delivery" />
    </el-form-item>
    <el-form-item label="Activity type">
      <el-checkbox-group v-model="form.type">
        <el-checkbox label="Online activities" name="type" />
        <el-checkbox label="Promotion activities" name="type" />
        <el-checkbox label="Offline activities" name="type" />
        <el-checkbox label="Simple brand exposure" name="type" />
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="Resources">
      <el-radio-group v-model="form.resource">
        <el-radio label="Sponsor" />
        <el-radio label="Venue" />
      </el-radio-group>
    </el-form-item>
    <el-form-item label="Activity form">
      <el-input v-model="form.desc" type="textarea" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

以上内容为CV内容

1.ref和reactive的区别

首先俩者相同之处都是可以创建一个对象
ref接受的参数可以是对象，也可以是一个值，而reactive 接受入参必须是对象形式
ref的值必须从.value 属性中读取值

案例如下

 //弹窗初始化 dialogFormVisible初始值就为false
 const dialogFormVisible = ref(false)



//而以下俩种方式都可以
const tableData = ref({
    query: '',
    pagenum: 1,
    pagesize: 5
  })



const tableData = reactive({
    query: '',
    pagenum: 1,
    pagesize: 5
  })

个人感觉ref好用，因为也不用区分是一个对象还是一个常量，推荐ref

2.vue3新特性双向绑定 v-model

我们先看elementplus中有一段内容

const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})

粗略一看创建了一个form对象，里面有各种的属性，还不知道有什么用

然后再看form表单

 <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>

里面有一个:model 这个意思就是动态绑定咱们刚刚创立的form对象
而 <el-input v-model="form.name" /> 正是绑定了form表单的name属性
可以在输入框就可以给form对象赋值，而form对象也可以给输入框赋值，以此完成数据的双向绑定

这时不信的话可以打印输出一下

总结：想用v-model的话必须给表单绑定上咱们的form对象里面的输入框也必须得绑定上咱们的form对象属性

2.快速使用form表单校验

1.使用自带的表单校验

这里就贴自己的代码哈哈哈

在script 里面主要是俩个一个是定义指向表单的ref 一个是自己的rule

  // 定义ref
      const ruleForms = ref(null)

      // 定义rules
      const rules = {
        username: [
          {
            required: true,
            message: 'Please input Username',
            //trigger含义是鼠标离开就触发
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: 'Length should be 3 to 5',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: 'Please input Password',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 20,
            message: 'Length should be 3 to 5',
            trigger: 'blur'
          }
        ]
      }

再看form表单里面

 <el-form :model="ruleform" :rules="rules" ref="ruleForms"  >

model已经讲解过在这里新增了俩个东西
:rules 这里也是动态绑定咱们的rules对象，用于表单校验
而这里的ref正是咱们刚刚创立的ruleforms对象，有什么用呢，咱们往下看

在输入框会有一个新增内容

 <el-form-item label="邮箱" prop="username">
   <el-input name="username" v-model="ruleform.username"  />
 </el-form-item>

注意！！！在el-form-item会有一个prop 里面所填入的正是rules对象里面的username属性

所以结合刚刚的ref 意思就是用ref来指向咱们的rules 而prop对相应的属性进行验证

总结：

表单的校验需要一个用于指向的ref
一个校验规则的rules
还有就是要把每一个输入框加上prop 来获取进而进行验证

2.自定义表单校验器

在理解了自带的之后自定义表单校验器也就很好理解了这里就不过多阐述原理同上

3. elementplus的form表单总结

主要是俩个内容

1.表单值的双向绑定这个跟v-model有关实际运用就是把值传给后端

需要定义一个form对象，属性是后台需要的内容
然后再在form表单里面用v-model进行双向绑定

2.表单值的验证

需要定义一个用于指向的ref对象
需要定义一个自己的rules
在表单里面写上ref ：rules 绑定
在输入框填入prop的值对应为rules里面的属性

在最后贴一个用于后端的axios的二次封装在form表单的登录可以用的到哦

(48条消息) vue3---axios实现二次封装_湘锅锅的博客-优快云博客