element UI使用归纳

这篇具有很好参考价值的文章主要介绍了element UI使用归纳。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

  1. 禁止选择今天之前的日期(含今天)
    设置picker-option(data中定义,标签引用):
 currentPickOption: {
        disabledDate (time) {
          return time.getTime() < Date.now()
        }
      },
  1. 全局配置高亮显示当前点击的行
    项目类型:vue项目
    修改文件:main.js
    添加内容:
// 修改el-table属性,默认高亮显示当前选中行
ElementUI.Table.props.highlightCurrentRow.default = true
  1. el-table边界溢出
<style lang="scss">
.el-table td .gutter, .el-table th .gutter{
  display: none;
}
</style>

  1. 表单验证:修改密码为例
<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,一致。

  1. 点击后el-badge的提示消失
    在el-menu-item中写触发函数,不是原来的@click而是@click.native。在router-link也是使用@click.native。
    el-bage绑定hidden,当hidden为true是隐藏,触发的函数实现对hidden的值改变

  2. 待续文章来源地址https://www.toymoban.com/news/detail-449505.html

到了这里,关于element UI使用归纳的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element ui时间选择器el-date-picker关于日期禁用disabledDate的使用

    项目中很多场景都用到时间范围选择的组件:  这时候我们过多选择的是elment ui里面的el-date-picker组件,但是又嫌弃人家原始的这个丑陋   所以选择自己组装,有没有小伙伴像我这样写的呢: 发现始终不触发disabledDate,不会走进禁用的方法。寻思再三后,看官网介绍它并不是

    2024年02月08日
    浏览(52)
  • element UI日期选择器固定选择范围

    项目中经常会使用到日期选择器,并且会对可选择的日期有要求,分享几个常用的,给大家作参考。 只能选择当前日期前(不包含当前日期)  只能选择当前日期前(包含当前日期) 指定日期范围(例如2022年12月1日至当前日期)

    2024年02月07日
    浏览(35)
  • element UI使用归纳

    禁止选择今天之前的日期(含今天) 设置picker-option(data中定义,标签引用): 全局配置高亮显示当前点击的行 项目类型:vue项目 修改文件: main.js 添加内容: el-table边界溢出 表单验证:修改密码为例 el-form-item中的prop是el-form中rule值中的验证规则。 el-form的refs属性值和t

    2024年02月05日
    浏览(32)
  • vue使用element-ui中日期选择器 (el-date-picker) 出现报错

    一、代码 二、报错 三、原因是 2.15.9这个版本有问题    四、解决办法-----版本降到2.15.8 即可 ① 卸载   npm uninstall element-ui  ②指定版本安装  npm install element-ui@2.15.8 ③ 查看版本即可 npm list  

    2024年02月16日
    浏览(52)
  • 记录vue项目使用element-ui中日期选择器 (el-date-picker) 出现报错!!!

    今天在vue项目中使用elementUI 时间组件时候遇到了一个问题 在我使用日期时间选择器时, 控制台报错!!!!!! 一开始我一直以为是我父组件传值到子组件出了问题,但是我这个组件没有传值呀,而且系统流程能真正运行,就是控制台报错了,虽说也不影响什么,但是总是

    2024年02月16日
    浏览(55)
  • Element UI DatePicker 日期选择器

    该组件选择周的时候,默认显示‘xxxx年第x周’,但在需求要显示为‘xxxx年x月第x周(mm.dd - mm.dd)’或者‘本周(mm.dd - mm.dd)’,最终效果为 首先需要修改v-model默认展示日期,控件中默认展示为周二,设置picker-options,修改为周一, 同时设置不可选本周日以后的时间: 设置显

    2024年02月09日
    浏览(41)
  • element-ui 时间日期选择器限制选择范围

    组件代码 场景1:设置选择今天及今天之后的日期 情景2: 设置选择今天以及今天以前的日期 情景3: 设置选择三个月之内到今天的日期 情景4: 设置选择最大范围为30天

    2024年02月12日
    浏览(37)
  • Element ui 日期时间选择器取消分秒

    日期时间选择器只需要到小时,不需要分钟和秒。 示例如下: 1 :将 format 和 data-format 设置只显示到小时 2:修改css样式 新建 .scss 文件 , 修改时间选择器的样式 3:在 main.js 文件中import

    2024年02月16日
    浏览(45)
  • element-ui表格复选超出数量后剩下的全部禁止选择

    先上效果图   主要是两个方面, 1.单选 2.页面内的全选 单选逻辑简单  全选是无法置灰,只能在事件触发后给出提示信息,跟上篇文章提到的方案一致

    2024年02月12日
    浏览(34)
  • Element UI DatePicker 日期范围选择动态设置禁选日期

    今天在工作时,后端提出了一个DatePicker日期范围组件的一个问题 用图描述大概就是选择开始日期 13 号后,只能选择 13 号前一周和后一周的日期,其他日期处于禁止选择状态。 先去看了下 element 的相关文档,找到了一个 当前时间日期选择器特有的选项picker-options, 传送门

    2024年02月12日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包