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;
}
});
}

 

posted on 2020-09-25 18:18  周文豪  阅读(141)  评论(0)    收藏  举报