element UI使用归纳

最新推荐文章于 2023-09-21 09:47:51 发布

夭桃鸣鹿

最新推荐文章于 2023-09-21 09:47:51 发布

阅读量993

点赞数

分类专栏： HTML 插件（依赖）使用文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/weixin_43302988/article/details/130752015

版权

HTML 同时被 2 个专栏收录

8 篇文章

订阅专栏

插件（依赖）使用

2 篇文章

订阅专栏

禁止选择今天之前的日期（含今天）
设置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，一致。