关于 element-ui 的那些事情

随笔：总结一些工作中遇到的问题和解决方案汇总

如有侵权，及时删除

ElementFE 查找(github.com/ElemeFE/ele…)

el-table

关于fixed属性

问题描述：
添加fixed属性，出现多余的横线，滚动条失效

解决方案：

第一种：

<style scoped>
    ::v-deep  .el-table__fixed,  ::v-deep  .el-table__fixed-right{
      height: 100% !important; //设置高优先，以覆盖内联样式
    }
   
  ::v-deep .el-table__fixed {
    height: 100% !important; // 让固定列的高自适应，且设置!important覆盖ele-ui的默认样式
    bottom: 18px; // 固定列默认设置了定位， position: absolute;top: 0;left: 0;只需要再设      置一下bottom的值，让固定列和父元素的底部出现距离即可
  }

  ::v-deep .el-table__body-wrapper{
    z-index:2
  }
</style>
复制代码

第二种：

// el-table设置 max-height="100%"

<el-table
 max-height="100%"
>
</el-table>

复制代码

el-input

关于type=number属性

问题描述：
type为number类型的时候，maxLength限制的数字失效

解决方案：

第一种：

// 不用maxlength用oninput完美解决 
<el-input 
    type="number" 
    oninput="if(value.length>11)value=value.slice(0,11)" 
    placeholder="输入用户手机号查询" 
> 
</el-input>
复制代码

第二种：

//el-input 组件封装 思路：根据传入的 maxLength 去控制限制的个数

<el-input
  @input="intValidator"
>
</el-input>

<script>
// props
obj (maxLength可以设计obj到里面) 或者单独传入 maxLength
// methods 方法：
intValidator(e){
    if(this.obj.type !== 'number' ) return
    let value = e.target.value.toString()
    //判断不要超过位数
    if(value.length > this.obj.maxLength ){
      value= value.slice(0, this.obj.maxLength)
      this.obj.phone = value
}
</script>
复制代码

问题描述：
type为number类型的时候，去掉el-input 上面的上下箭头

解决方案：

<style>
 
.el-form--inline .el-form-item__content {
  width: auto !important;
}
input[type="number"] {
  -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

</style>
复制代码

el-pagination

问题描述：
删除尾部的页码变动

解决方案：

1. 使用侦听器侦听该属性，改变为3时再次请求数据
2. 对于侦听器监听对象中的属性方法查阅官方文档后发现要用字符串

watch: { 
 params.pagenum': function () {
  this.getUsers() 
} },
复制代码

链接图文：