elementui 注意点总结

260 阅读1分钟

1、时间控件清除时间

问题背景:

改变时间选择需要重新调列表接口,点击清除按钮也需要重新调列表接口

<el-date-picker
    v-model="form.groupCreateTime"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始时间"
    end-placeholder="结束时间" @change="changeCreateTime" value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>

changeCreateTime(val){ //清除时也会触发change事件
   if(val){
      this.form.startCreateDate = val[0];
      this.form.endCreateDate = val[1];
   }else {
      //点击清除按钮的时候val返回的是null,所以要重新定义时间为空
      this.form.startCreateDate = '';
      this.form.endCreateDate = '';
      this.form.groupCreateTime = []
   }
   this.list()
},

2、上传图片做限制

<el-upload
    class="avatar-uploader"
    action="/nursing-gw/mall/ignore/main/addImage/53"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload" :disabled="flag">
    <img v-if="imageUrl" :src="imageUrl" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

//上传的图片大小不超过30kb,图片尺寸1比1
beforeAvatarUpload(file) {
            console.log(file.size,'file8888')
            const extension = file.type === "image/jpeg" || file.type === "image/png";
            const isLt2M = file.size / 1024 < 30;
            if(!extension){
                this.$message.error("上传的图片只能是 JPG、JPEG、PNG 格式!");
                return false;
            }else if(!isLt2M) {
                this.$message.error("上传的图片大小不能超过 30kb!");
                return false;
            }else {
                //上传图片比例必须是1比1
                const isSize = new Promise(function(resolve, reject) {
                    let _URL = window.URL || window.webkitURL;         
                    let img = new Image();
                    img.onload = function() {
                        let valid = img.width == img.height;
                        valid ? resolve() : reject();
                    }
                    img.src = _URL.createObjectURL(file);
                }).then(() => {
                    return file;
                }, () => {
                    this.$message.error('上传的图片必须是1比1的比例!');
                    return Promise.reject();
                });
                return  isSize;
            }
},

3.checkbox组件中的indeterminate 状态(用于全选)

<el-checkbox :indeterminate="a" v-model="b">全选</el-checkbox>

checkbox有三种状态全选(显示的'√'),选中部分(显示的'-'),全不选(啥都没显示)

对于indeterminate和v-model绑定的a和b的值

如果true true 或者 true false样式为-

如果false true样式为√

如果false false样式为不勾