vue+element控件之间间距太大问题及解决

vue+element控件之间间距太大问题

减小控件之间的间距

style="float:left" ，float:right，等等，可以使某个控件居左显示

margin-top，margin-bottom，margin-left，margin-right可以控制控件之间的间距，element的控件之间间距较大，可以将这些值设置成负数来缩小间距

style="margin-top:-5px"

style="margin-bottom:-5px"

vue+element遇到的问题

1.用lang=“scss” 写样式

修改element的默认样式，用 ::v-deep 样式穿透

<style lang="scss" scoped>
    ::v-deep .el-input-group__append {
        background-color: #5094ff;
        border: 1px solid #5094ff;
      }
</style>

用lang=“less” 写样式，修改element的默认样式，用 /deep/ 样式穿透

2.element 分页符功能模块隐藏以及位置调换

layout布局，修改顺序可以改变功能模块的位置

3.element 表单使用fixed固定行列导致错位问题

出现的原因是 el-scrollbar__wrap::-webkit-scrollbar滚动条和表格自己的滚动条el-table__body-wrapper::-webkit-scrollbar 的宽度和高度不一致

解决：

//把两个宽高设置一样，不一定是30
.el-scrollbar__wrap::-webkit-scrollbar{
   width: 30px; 
   height: 30px;
}
------------------------------------------
.el-table__body-wrapper::-webkit-scrollbar {
    width: 30px; 
    height: 30px; 
  }
 //设置表格滚动条样式
.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #dddee0;
    border-radius: 8px;
  }

4.element的table中input的blur事件冲突问题

问题描述：

1.在table中有一列有input框，input框用的是blur事件，失去焦点，触发事件修改value;

2.图中【说明】这列，因为内容太多，使用了show-overflow-tooltip （当内容过长被隐藏时显示），就是鼠标放上去显示全部内容

问题来了：当input框内容被修改，但是没有失去焦点没有触发事件，此时将鼠标移到到【说明】这列，input框内容将被还原

造成原因：

猜测：：可能！！！：table为了显示这个内容，重新获取了一次数据，刷新这列数据，相当于页面重新加载了一次数据，所以input框内容被还原了

解决办法：

如果想要坚持input使用blur事件，那就只能去掉show-overflow-tooltip属性；但是又想显示长内容，建议使用 element-ui的Tooltip 文字提示组件：常用于展示鼠标 hover 时的提示信息。

5.el-scrollbar 滚动条自定义

首先要修改浏览器自带滚动条样式

//设置浏览器滚动条长宽
 ::-webkit-scrollbar {
     width: 6px;//6px刚好让浏览器默认的滚动条挤出右边，看不见（除了最大的那条滚动条）
     height: 6px;
 }
//设置浏览器滚动条的背景颜色
::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 3px;
}

修改element修改滚动条

//高度撑满
.el-scrollbar {
    height: 100%;
}
//element-ui的自定义的滚动条 把原生的滚动条挤到看不到地方
.el-scrollbar__wrap {
    overflow: scroll;
    这个两个添加了会让内容展示不完，实测不建议添加
    //width: 110%;
    //height: 120%;   
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。