element-ui踩坑指南

1、table表头和表格线对不齐问题

解决办法:

在index.html或者入口文件App.vue中添加样式

body .el-table th.gutter{
    display: table-cell!important;
}

2、dialog对话框中使用form表单验证,再次打开验证依然存在问题

解决办法:使用resetFields()方法或者clearValidate()方法重置表单或清除验证

//open打开方法,在dialog打开时清除验证
open () {
      this.showFlag = true
      this.$nextTick(() => {
        this.$refs.dynamicValidateForm.clearValidate()
      })
}

3、dialog关闭时同时使用message提示,message抖动问题

在页面有滚动条的情况先打开dialog时,dialog会给页面的<body></body>添加一个class类名和一个style样式(padding-right:17px)。关闭时,body由于失去overflow属性和padding-right属性,message是居中的,所以会抖动一下

body {
    overflow-y: auto !important;
    padding-right: 0 !important;
}

4、el-input只允许输入数字

虽然el-input有个属性type可以设置为number,但是设置完成之后输入框最右边有上下箭头调整数字大小的,这也是input自带的,那么单纯想设置数字的话用正则去过滤一下

<el-input type="text" onkeyup="value=value.replace(/[^d]/g,'')" size="small" width="50" v-model="editRoleParam.roleID" placeholder="请输入数字">
原文地址:https://www.cnblogs.com/zmyxixihaha/p/12192676.html