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

目录

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表单

 以上内容为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表单 

• 里面有一个:model  这个意思就是动态绑定咱们刚刚创立的form对象
• 而 正是绑定了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表单里面

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

---

 

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

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

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

 总结：

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

---

2.自定义表单校验器 

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

---

 

3. elementplus的form表单总结

主要是俩个内容

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

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

2.表单值的验证

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

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

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