element-plus 表单组件 之element-form

elment-plus的表单组件的标签有el-form,el-form-item。
单个el-form标签内包裹若干个el-form-item,el-form-item包裹具体的表单组件,如输入框组件,多选组件,日期组件等。

el-form组件的主要作用是:提供统一的布局给其他表单组件,其他组件可以继承表单组件的size,以及规则校验

form表单主要属性如下:

属性名说明默认值
model表单数据对象
rules表单验证规则
inline行内表单模式false
label-positionleft right label-widthright
label-width‘50px’ auto‘’
show-message是否显示校验错误信息true
inline-message是否以行内形式展示校验信息false
status-icon是否在输入框中显示校验结果反馈图标false
size表单尺寸

form-item 主要属性如下:

属性名说明默认值
propvalidate,resetField时使用,一般和v-model值保持一致
label标签文本

用法示例

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance,FormRules  } from 'element-plus'

const formRef = ref<FormInstance>()

interface Good {
  goodName:string
  stock:number
  createDate:Date
  description:string
}


const checkStock = (rule: any, value: any, callback: any) => {
  console.log("checkStock ",value)
  if (!value) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('Please input digits'))
    } else {
      if (value < 10) {
        callback(new Error('stock must be greater than 10'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const ruleForm=reactive<FormRules<Good>>({
  goodName:[
    {required:true,
      message:"please input goodName",
      trigger:'change'
    }
  ],
  stock:[
    {
      validator:checkStock
    }
  ]
})

const goodForm=ref<Good>({
  goodName:"",
  stock:10,
  createDate:new Date(),
  description:""
});

const submitForm=()=>{
  formRef.value.validate((valid:Boolean)=>{
    if (valid){
        console.log("submit success ",goodForm) ;
    }else{
      console.log("form validate error ");
    }
  })
}

const resetForm=()=>{
  formRef.value.resetFields()
}

</script>

    
<template>
    <el-form :model="goodForm" status-icon label-position="left" label-width="auto" ref="formRef" :rules="ruleForm">
        <el-form-item label="goodName" prop="goodName">
          <el-input v-model="goodForm.goodName" placeholder="please enter goodName"></el-input>
        </el-form-item>

        <el-form-item label="stock" prop="stock">
          <el-input-number  v-model="goodForm.stock" :step="1"></el-input-number>
        </el-form-item>

        <el-form-item label="createDate" prop="createDate">
          <el-date-picker type="date" v-model="goodForm.createDate" format="YYYY-MM-DD" clearable></el-date-picker>
        </el-form-item>

        <el-form-item label="description" prop="description">
            <el-input type="textarea" v-model="goodForm.description" placeholder="please enter description"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">submit</el-button>
          <el-button @click="resetForm">reset</el-button>
        </el-form-item>

    </el-form>
      
</template>

<style scoped>
  
</style>

在这里插入图片描述
https://element-plus.org/zh-CN/component/form.html#form-attributes

  • 7
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在父组件中校验多个子组件表单,可以采用以下步骤: 1. 在父组件中引入 `Form` 组件,并设置 `ref` 属性 ```vue <template> <div> <form ref="form"> <child-form-1></child-form-1> <child-form-2></child-form-2> <el-button @click="submitForm">提交</el-button> </form> </div> </template> <script> import ChildForm1 from './ChildForm1.vue'; import ChildForm2 from './ChildForm2.vue'; export default { components: { ChildForm1, ChildForm2, }, methods: { submitForm() { this.$refs.form.validate(valid => { if (valid) { console.log('校验成功'); } else { console.log('校验失败'); } }); }, }, }; </script> ``` 2. 在子组件中分别引入 `FormItem` 和 `el-form-item` 组件,并设置 `prop` 属性 ```vue <template> <div> <el-form-item label="姓名" :rules="nameRules"> <el-input v-model="name"></el-input> </el-form-item> <el-form-item label="年龄" :rules="ageRules"> <el-input v-model="age"></el-input> </el-form-item> </div> </template> <script> export default { data() { return { name: '', age: '', nameRules: [ { required: true, message: '请输入姓名', trigger: 'blur' }, ], ageRules: [ { required: true, message: '请输入年龄', trigger: 'blur' }, { type: 'number', message: '请输入数字', trigger: 'blur' }, ], }; }, props: { prop: String, }, }; </script> ``` 3. 在父组件中使用 `$children` 获取所有子组件,并遍历执行表单校验 ```vue <template> <div> <form ref="form"> <child-form-1 ref="form1"></child-form-1> <child-form-2 ref="form2"></child-form-2> <el-button @click="submitForm">提交</el-button> </form> </div> </template> <script> import ChildForm1 from './ChildForm1.vue'; import ChildForm2 from './ChildForm2.vue'; export default { components: { ChildForm1, ChildForm2, }, methods: { submitForm() { let valid = true; this.$children.forEach(child => { if (child.$refs[child.prop]) { child.$refs[child.prop].validate(valid => { if (!valid) { valid = false; } }); } }); if (valid) { console.log('校验成功'); } else { console.log('校验失败'); } }, }, }; </script> ``` 在这个例子中,我们通过 `$children` 获取所有子组件,并使用 `child.$refs[child.prop]` 获取到子组件中的 `el-form-item`,然后执行 `validate` 方法进行校验。如果校验失败,将 `valid` 设置为 `false`,最终判断 `valid` 是否为 `true` 来判断所有表单校验是否成功。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值