ElementUI之表单验证
使用ElementUI实现简单的CUD（增删改）功能以及表单验证，包含以下几个步骤：
- 安装ElementUI
npm i element-ui -S
- 引入ElementUI
在main.js中添加以下代码：
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
- 创建Vue组件
创建一个Vue组件，包含一个表格和相关操作按钮，代码如下：
<template>
<div>
<el-button @click="showDialog('add')">添加el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名">el-table-column>
<el-table-column prop="age" label="年龄">el-table-column>
<el-table-column prop="email" label="邮箱">el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="showDialog('edit', scope.row)">编辑el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除el-button>
template>
el-table-column>
el-table>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
<el-form :model="formData" :rules="formRules" ref="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name">el-input>
el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="formData.age">el-input>
el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email">el-input>
el-form-item>
el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取 消el-button>
<el-button type="primary" @click="handleSubmit">确 定el-button>
div>
el-dialog>
div>
template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, email: '[email protected]' },
{ name: '李四', age: 25, email: '[email protected]' },
{ name: '王五', age: 30, email: '[email protected]' }
],
dialogTitle: '',
dialogVisible: false,
formData: {
name: '',
age: '',
email: ''
},
formRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', message: '年龄必须为数字值', trigger: 'blur' },
{ min: 18, max: 60, message: '年龄必须在18到60之间', trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
]
}
}
},
methods: {
// 打开弹窗
showDialog(type, data) {
if (type === 'add') {
this.dialogTitle = '添加用户'
this.formData = { name: '', age: '', email: '' }
} else {
this.dialogTitle = '编辑用户'
this.formData = Object.assign({}, data)
}
this.dialogVisible = true
},
// 提交表单
handleSubmit() {
// 校验表单数据
this.$refs.form.validate((valid) => {
if (valid) {
// 提交表单数据
if (this.dialogTitle === '添加用户') {
this.tableData.push(this.formData)
} else {
Object.assign(this.tableData[this.tableData.indexOf(data)], this.formData)
}
this.dialogVisible = false
this.$message.success('操作成功')
} else {
this.$message.error('表单校验不通过')
return false
}
})
},
// 取消操作
handleCancel() {
this.dialogVisible = false
this.$refs.form.resetFields()
},
// 删除用户
handleDelete(index) {
this.$confirm('确认删除该用户吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(index, 1)
this.$message.success('删除成功')
}).catch(() => {})
}
}
}
script>
- 表单验证
在上面的代码中，我们定义了一个formRules对象来存储表单验证规则，然后在el-form组件中通过:rules绑定，例如：
<el-form :model="formData" :rules="formRules" ref="form">
在el-form-item组件中通过prop绑定到formRules中的相应属性，例如：
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name">el-input>
el-form-item>
在提交表单时，我们可以使用validate方法来进行表单验证，例如：
this.$refs.form.validate((valid) => {
if (valid) {
// 提交表单数据
if (this.dialogTitle === '添加用户') {
this.tableData.push(this.formData)
} else {
Object.assign(this.tableData[this.tableData.indexOf(data)], this.formData)
}
this.dialogVisible = false
this.$message.success('操作成功')
} else {
this.$message.error('表单校验不通过')
return false
}
})
如果验证通过，则提交表单数据；否则提示错误信息。注意，validate方法是异步的，需要传入一个回调函数来处理返回值。
- 完整代码
<template>
<div>
<el-button @click="showDialog('add')">添加el-button>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名">el-table-column>
<el-table-column prop="age" label="年龄">el-table-column>
<el-table-column prop="email" label="邮箱">el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="showDialog('edit', scope.row)">编辑el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.$index)">删除el-button>
template>
el-table-column>
el-table>
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible">
<el-form :model="formData" :rules="formRules" ref="form">
<el-form-item label="姓名" prop="name">
<el-input v-model="formData.name">el-input>
el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="formData.age">el-input>
el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="formData.email">el-input>
el-form-item>
el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取 消el-button>
<el-button type="primary" @click="handleSubmit">确 定el-button>
div>
el-dialog>
div>
template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, email: '[email protected]' },
{ name: '李四', age: 25, email: '[email protected]' },
{ name: '王五', age: 30, email: '[email protected]' }
],
dialogTitle: '',
dialogVisible: false,
formData: {
name: '',
age: '',
email: ''
},
formRules: {
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' },
{ min: 2, max: 10, message: '长度在2到10个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄