Element-ui Form 表单
原文链接：https://note.noxussj.top/?source=sifo
通常用于抉择日期
按需引入形式
如果是残缺引入可跳过此步骤
import Vue from 'vue'import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElButton } from 'element-ui'import 'element-ui/lib/theme-chalk/base.css'import 'element-plus/theme-chalk/form.css'import 'element-plus/theme-chalk/form-item.css'import 'element-plus/theme-chalk/input.css'import 'element-plus/theme-chalk/select.css'import 'element-plus/theme-chalk/option.css'import 'element-plus/theme-chalk/button.css'Vue.use(Form)Vue.use(ElFormItem)Vue.use(ElInput)Vue.use(ElSelect)Vue.use(ElOption)Vue.use(ElButton)表单验证
在避免用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
<template> <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="80px"> <el-form-item label="流动名称" prop="name"> <el-input v-model="ruleForm.name" placeholder="请输出流动名称" /> </el-form-item> <el-form-item label="流动区域" prop="region"> <el-select v-model="ruleForm.region" placeholder="请抉择流动区域"> <el-option label="上海" value="shanghai" /> <el-option label="北京" value="beijing" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)"> 提交 </el-button> </el-form-item> </el-form></template><script>export default { data() { return { ruleForm: { name: 'Hello', region: '' }, rules: { name: [{ required: true, message: '请输出流动名称', trigger: 'blur' }], region: [{ required: true, message: '请抉择流动区域', trigger: 'change' }] } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!') } else { console.log('error submit!!') return false } }) } }}</script>Form Attributes
Form Methods
原文链接：https://note.noxussj.top/?source=sifo