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%;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了解决vuex改变了state的值,但是页面没有更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了vue封装一个简单的div框选时间的组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
新项目采用Vue3作为前端项目框架,避免不了要使用echarts,这篇文章主要给大家介绍了关于Vue3中按需引入ECharts的相关资料,需要的朋友可以参考下2023-09-09
Vue中使用jsencrypt进行RSA非对称加密的操作方法
这篇文章主要介绍了Vue中使用jsencrypt进行RSA非对称加密，在这里需要注意要加密的数据必须是字符串，对Vue RSA非对称加密相关知识感兴趣的朋友一起看看吧2022-04-04
Vue3利用组合式函数和Shared Worker实现后台分片上传
这篇文章主要为大家详细介绍了Vue3如何利用组合式函数和Shared Worker实现后台分片上传(带哈希计算),感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
最近遇到这样的问题在app中使用uni-forms表单,并添加校验规则,问题是即使输入内容,表单校验依然失败,本文给大家分享uni-app中vue3表单校验失败的问题及解决方法,感兴趣的朋友一起看看吧2023-12-12
响应式 API 赋予了组合式 API 一大坨可能性的同时,代码精简,虽然但是,我们应该意识到响应性的某些陷阱,比如丢失响应性,在本文中,我们将学习如何正确解构 Vue 组件的 props,使得 props 不会丢失响应性2024-01-01
这篇文章主要介绍了vue2中如何自定义组件的v-model，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue Router是Vue.js的官方路由器,它与Vue.js核心深度集成,使使用Vue.js构建单页应用程序变得轻而易举,下面这篇文章主要给大家介绍了关于Vue3实现路由跳转的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要给大家介绍了关于如何利用Vue实现一个markdown编辑器的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
最新评论