Element UI Tips

el-input

• input只能输入整数不能输入负数

oninput ="value=value.replace(/[^0-9.]/g,'')"

• 移除密码框自动填充

readonly onfocus="this.removeAttribute('readonly');"

el-select

• 在使用远程搜索时，如果想同时可以使用自定义输入的值，添加@blur.native="selectBlur"

<el-select v-model="value" @blur.native="selectBlur"</el-select>

const selectBlur = (e) {
  value.value = e.target.value
}

el-upload

• <el-upload/>上传后隐藏上传按钮

<el-upload :file-list="fileList" :class="{ 'hide-upload': fileList.length > 0 }"></el-upload>

.hide-upload {
    :deep(.el-upload--picture-card) {
      display: none;
    }
  }

• 模拟点击

document.querySelector(".upload- .el-upload").click()

• 关闭动画

:deep(.el-upload-list__item) {
    transition: none;
  }

• 在使用:auto-upload="false"后 before-upload 会失效

el-form

• 校验v-for中生成的多个form表单

<div v-for="(item, index) in arr" :key="item" class="form-demo" >
    <el-form ref="formRefs" :model="item" class="form-item" >
    <!-- 内容 -->
    </el-form>
</div>

const formRefs = ref();
const validate = (refs) => {
    const promises = refs.map((form, index) => form.validate());
    return Promise.all(promises);
}
async function submit = () => {
    try {
        isPass = await validate(formRefs.value);
    } catch (e) {
        console.log(e);
        isPass = false;
    };
    if (!isPass) return false;
    // 业务逻辑
    }
}

• 验证失败滚定位到第一个校验失败的位置

const restpotion = () => {
    let fisrtErrorDom = document.querySelectorAll('.el-form-item__error')[0];
    fisrtErrorDom.scrollIntoView({ block: 'end', behavior: 'smooth'}); };