<template>
<div class="contact-edit">
<el-form ref="contactForm" :model="form" :rules="rules" label-width="80px">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="form.sex" placeholder="请选择性别">
<el-option label="男" value="male"></el-option>
<el-option label="女" value="female"></el-option>
</el-select>
</el-form-item>
...
<el-form-item label="备注">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('contactForm')">{{ btnName }}</el-button>
<el-button @click="cancelForm">取消</el-button>
</el-form-item>
</el-form>
</div>
</template><script>
export default {
data () {
var nameValid = (rule, value, callback) => {
if (!value) {
callback(new Error('姓名不能为空'))
} else {
callback()
}
}
var mobileValid = (rule, value, callback) => {
let phonePattern = /(^s*$)|(^[1][3,4,5,7,8][0-9]{9}$)/
if (value && !phonePattern.test(value)) {
callback(new Error('手机号格式不正确'))
} else {
callback()
}
}
return {
type: '', // 控制是否是新建
...
rules: {
name: [{validator: nameValid, trigger: 'blur'}],
mobile: [
// {required: true, message: '手机号不能为空', trigger: 'blur'},
{validator: mobileValid, trigger: 'blur'}
] }
}
},
// 组件加载后的钩子
mounted: function () {
this.checkPageStatus(this.$route.query.id)
},
// 路由在组件中的钩子
beforeRouteUpdate: function (to, from, next) {
this.checkPageStatus(to.query.id)
next()
},
methods: {
// 检查页面是新建还是编辑
checkPageStatus: function (id) { ... },
cancelForm: function () {
this.$router.push('/contact')
},
onSubmit: function (formName) { ... }
}
}
</script>
可以看到mounted与beforeRouteUpdate中的代码有些重合，那是因为vue在路由仅仅只是参数变换的时候，是不会重新重新加载组件的，所以需要在beforeRouteUpdate中处理初始的数据。
nameValid与mobileValid为表单验证的函数，el-form配置rules属性名称，然后data中相应的添加rules即可开启表单验证，但是有一点一定要注意el-form-item上一定要设置对应的prop属性，rules才会生效。
9. 总结
非常简单的一个项目，但是有几个点一定要关注好：
