- 禁止选择今天之前的日期(含今天)
设置picker-option(data中定义,标签引用):
currentPickOption: {
disabledDate (time) {
return time.getTime() < Date.now()
}
},
- 全局配置高亮显示当前点击的行
项目类型:vue项目
修改文件:main.js
添加内容:
// 修改el-table属性,默认高亮显示当前选中行
ElementUI.Table.props.highlightCurrentRow.default = true
- el-table边界溢出
<style lang="scss">
.el-table td .gutter, .el-table th .gutter{
display: none;
}
</style>
- 表单验证:修改密码为例
<template>
<div id="changePwd">
<el-form :model="changePwd" status-icon :rules="rules2" ref="changePwd" label-width="100px" style="margin:20px auto;width:40%;min-width:300px;">
<el-form-item label="原密码" prop="pass">
<el-input type="password" v-model="changePwd.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="新密码" prop="passNew">
<el-input type="password" v-model="changePwd.passNew" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="changePwd.checkPass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('changePwd')">提交</el-button>
<el-button @click="resetForm('changePwd')">重置</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "changePwd",
data:function() {
var validatePass3=(rule, value, callback)=>{
if (value!=this.customer.password) {
callback(new Error('密码错误,请重新输入!'));
}else if (value.length<6 || value >16){
callback(new Error('密码长度不符!'));
} else{
callback();
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
}else if (value.length<6 || value >16){
callback(new Error('密码长度不符!'));
} else {
if (this.changePwd.checkPass != '') {
this.$refs.changePwd.validateField('checkPass');
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入密码'));
}else if (value.length<6 || value >16){
callback(new Error('密码长度不符!'));
} else if (value !== this.changePwd.passNew) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
return {
changePwd: {
pass:'',
passNew: '',
checkPass: '',
},
admin:{
id:'0',
username: '',
sex:'',
birthDate:'',
phone:'',
password:'',
mail:'',
},
rules2: {
pass:[
{required:true,validator:validatePass3,trigger:'blur'},
{min:6,max:16,message:'长度在6到16个字符',trigger:'blur'}
],
passNew: [
{ required:true,validator: validatePass, trigger: 'blur' },
{min:6,max:16,message:'长度在6到16个字符',trigger:'blur'}
],
checkPass: [
{ required:true,validator: validatePass2, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$confirm(
"确认修改",
{
type:"warning"
}
).then(()=>{
this.admin.password=this.changePwd.passNew; //赋值新密码
let params=this.$qs.stringify({
'admin':this.admin
});
this.$http({
url:'/"updateAdmin',
data:params,
method:'post'
})
}).then(res=>{
if(res.status==200){
this.$message({
type:"info",
message:"修改成功"
});
}
}).catch(()=>{
this.$message({
type:"info",
message:"已取消修改"
});
});
} else {
alert("请先按要求填写信息!")
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
},
created:function () {
this.admin=this.$store.state.loginUser;
}
}
</script>
<style scoped>
</style>
el-form-item中的prop是el-form中rule值中的验证规则。
el-form的refs属性值和this.$refs[refs属性值].validate,一致。
-
点击后el-badge的提示消失
在el-menu-item中写触发函数,不是原来的@click而是@click.native。在router-link也是使用@click.native。
el-bage绑定hidden,当hidden为true是隐藏,触发的函数实现对hidden的值改变文章来源:https://www.toymoban.com/news/detail-449505.html -
待续文章来源地址https://www.toymoban.com/news/detail-449505.html
到了这里,关于element UI使用归纳的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!