详解ElementUI之表单验证、数据绑定、路由跳转
程序员文章站
2022-06-17 16:19:06
1.新建表单组件el-form.vue
1.新建表单组件el-form.vue
<template>
<div class="form">
<el-form ref="form" :model="userform" :rules="this.$store.state.userinfo.checkrules" label-position="left" label-width="180px">
<el-form-item label="真实姓名" prop="truename">
<el-input v-model="userform.truename"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="userform.age"></el-input>
</el-form-item>
<el-form-item label="出生年月">
<el-date-picker type="date" placeholder="选择日期"
v-model="userform.birthday">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitinfo">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style>
.form{margin-top: 20px;}
</style>
<script>
export default {
created(){
this.userform = this.$store.state.userinfo.userform;
},
beforedestory(){
this.$store.state.userinfo.userform=this.userform;
},
data() {
return {
userform: {
truename: '',
age: '',
birthday: ''
}
};
},
methods:{
submitinfo(){
// 表单验证方法
this.$refs.form.validate(function (result) {
if(result){
// 验证通过,调用module里的setuserinfo方法
this.$store.dispatch("setuserinfo");
}else{
alert("表达验证不合法")
}
}.bind(this));
}
},
}
</script>
2.新建一个module,eleuserinfo.js
import vue from "vue";
import {routerconfig} from "./../../jssrc/config";
export default{
state:{
userform:{truename:"", age:"", birthday:""},
checkrules:{
truename:[
{required:true, message:"请输入活动名称", trigger:'blur'},
{min:3, max:5, message:"必须3-5个字符", trigger:'blur'}
],
age:[{validator:(rule,value,callback)=>{
if(/^\d+$/.test(value) == false){
callback(new error("年龄只能输入数字"));
}else{
callback();
}
}, trigger:'blur'}]
},
},
actions:{
setuserinfo(context){
// 路由跳转
routerconfig.push({name:"newslist"});
}
}
}
3.我们把jssrc/index.js 中的代码分离出一部分
config.js
import vuerouter from 'vue-router';
import newsdetail from "./../components/news-detail.vue";
import eltable from "./../components/el-table.vue";
import elindex from "./../components/elmentui/el-index.vue";
import elhot from "./../components/elmentui/el-hot.vue";
import eluserinfo from "./../components/elmentui/el-form.vue";
const userlogin = resolve => {
// 成功之后的回调
resolve(require("./../components/user-login.vue")); // 这就是异步加载的方式
}
const newslist = resolve => {
// 成功之后的回调
resolve(require("./../components/news-list.vue")); // 这就是异步加载的方式
}
// 路由模块
export const routerconfig = new vuerouter({
routes: [
{ path: '/', component: userlogin},
{ path: '/news', component: newslist, name:"newslist"},
{ path: '/news/:newsid', component: newsdetail, name:"newsdetail"},
{ path: '/login', component: userlogin,name:"userlogin" },
{ path: '/eltable', component: eltable,name:"eltable" },
{ path: '/elindex', component: elindex,name:"elindex", children:[
{path:"hot",component:elhot,name:"elhot"},
{path:"userinfo",component:eluserinfo,name:"eluserinfo"},
]}
]
})
4.然后jssrc/index.js 修改成如下
import vue from "vue";
import pagenav from "./../components/page-nav.vue";
// 引入
import validate from "./../components/validate";
// 使用
vue.use(validate);
import vuerouter from 'vue-router';
vue.use(vuerouter); // 全局使用插件
import vueresource from 'vue-resource';
vue.use(vueresource);
import usermodule from "./../store/modules/usermodule";
import newsmodule from "./../store/modules/newsmodule";
import elemodule from "./../store/modules/elemodule";
import eleuserinfomoldule from "./../store/modules/eleuserinfo";
import vuex from 'vuex';
vue.use(vuex);
import elementui from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
vue.use(elementui);
const vuex_store = new vuex.store({
modules:{
users:usermodule,
news:newsmodule,
ele:elemodule,
userinfo:eleuserinfomoldule
}
})
//路由的配置
import {routerconfig} from "./config";
// 全局组件,不加入路由管理
vue.component("page-nav",pagenav);
let myvue = new vue({
el:".container",
store:vuex_store, //注入到vue
router:routerconfig,
});
5.查看效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 学习ExtJS Window常用方法