1、表单验证时由于数据库字段长度限制,进行验证。
<el-col :span="16">
<el-form-item label="家庭住址:" prop="homeAddress">
<el-input
v-model="addForm.homeAddress"
maxlength="200"
show-word-limit
clearable></el-input>
</el-form-item>
</el-col>
2、如果在第二页搜索时,发现搜索到了数据,却没有显示出来,是因为在第二页搜索时,page为2,但是搜索时应该只显示第一页
1)、点击搜索时,重新定义一个方法handleSearch取代getList()
<el-button
type="primary"
icon="el-icon-search"
@click="handleSearch">搜索
</el-button>
2)、定义handleSearch方法,方法中将page设置为1
handleSearch() {
this.listQuery.page = 1
this.getList()
},
3、输入框input变成文本域需要加两行代码
<el-input
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
maxlength="500"
show-word-limit
v-model="addForm.smokeHis"
style="width: 100%" clearable></el-input>
4、ElementUI表单验证时,对年龄的验证
<el-col :span="8">
<el-form-item label="年龄:" prop="age">
<el-input type="age" v-model.number="addForm.age" style="width: 200px" clearable></el-input>
</el-form-item>
</el-col>
addFormRules: {
age: [
{ required: true, message: '年龄不能为空'},
{ type: 'number', message: '年龄必须为数字值'}
]
},
或者这样表示
<el-form-item label="年龄" prop="age" :rules="[ { required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'} ]" > <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input> </el-form-item>
5、mybatis-plus精确查询和模糊查询
精确查询
Page<UserBasicInfo> userBasicInfoPage = new Page<>(page, limit);
QueryWrapper<UserBasicInfo> wrapper = new QueryWrapper<>();
if(StringUtils.isNotBlank(name)){
wrapper.eq("name",name);
}
if(StringUtils.isNotBlank(phone)){
wrapper.eq("phone",phone);
}
userBasicInfoPage = userBasicInfoService.page(userBasicInfoPage, wrapper);
模糊查询
Page<UserBasicInfo> userBasicInfoPage = new Page<>(page, limit);
QueryWrapper<UserBasicInfo> wrapper = new QueryWrapper<>();
// 使用模糊查询
wrapper.like(StringUtils.isNotBlank(name),"name",name);
wrapper.like(StringUtils.isNotBlank(phone),"phone",phone);
userBasicInfoPage = userBasicInfoService.page(userBasicInfoPage, wrapper);
6、给表格添加序号列
<el-table-column align="center" label="序号" width="60">
<template slot-scope="scope">{{ scope.$index+1 }}</template>
</el-table-column>
7、引入js文件时省略@/的设置:在vue.config.js中配置
configureWebpack: {
resolve: {
//设置别名
alias: {
assets: "@/assets",
components: "@/components",
views: "@/views",
store: "@/store",
utils: "@/utils",
api: "@/api",
plugins: "@/plugins"
}
}
}
import rules from "utils/rules";
8、在登录成功后,直接跳转到指定页面
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true;
this.$store
.dispatch("app/login", this.loginForm)
.then(res => {
if (res.result) {
this.$router.push("/main/user");
} else {
this.$message.error(res.msg);
}
this.loading = false;
})
.catch(error => {
console.info(error);
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
}