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="请输入数字">

 

posted @ 2020-01-14 16:27  朝思暮想的虫  阅读(1249)  评论(0)  编辑  收藏  举报