2023年6月20日发(作者:)
vueel-table滚动条样式设置(⾕歌、⽕狐)对于el-table滚动条的样式,webkit(⾕歌为代表)和 moz(⽕狐)的设置是不同的,因此需要分别进⾏设置。webkit(⾕歌)// 滚动条⼤⼩设置::v-deep .el-table__body-wrapper::-webkit-scrollbar { /*纵向滚动条*/ width: 5px; /*横向滚动条*/ height: 5px;}// 滚动条滑块样式设置::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #bfbfc0; border-radius: 5px;}// 滚动条背景样式设置::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { background: none;}// 表格横向和纵向滚动条对顶⾓样式设置::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner { background-color: #111;}// 去除滚动条上⽅多余显⽰::v-deep .el-table__header .has-gutter { display: none !important;}moz(⽕狐)// Firefox滚动条样式设置::v-deep .el-table__body-wrapper { overflow-y: scroll; scrollbar-color: #bebebf transparent; scrollbar-width: thin;}⽕狐⽬前只找到了 scrollbar-color 和 scrollbar-width 这两个属性,scrollbar-color 的第⼀个值是滚动条的颜⾊,第⼆个值是滚动条轨道背景⾊。
2023年6月20日发(作者:)
vueel-table滚动条样式设置(⾕歌、⽕狐)对于el-table滚动条的样式,webkit(⾕歌为代表)和 moz(⽕狐)的设置是不同的,因此需要分别进⾏设置。webkit(⾕歌)// 滚动条⼤⼩设置::v-deep .el-table__body-wrapper::-webkit-scrollbar { /*纵向滚动条*/ width: 5px; /*横向滚动条*/ height: 5px;}// 滚动条滑块样式设置::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #bfbfc0; border-radius: 5px;}// 滚动条背景样式设置::v-deep .el-table__body-wrapper::-webkit-scrollbar-track { background: none;}// 表格横向和纵向滚动条对顶⾓样式设置::v-deep .el-table__body-wrapper::-webkit-scrollbar-corner { background-color: #111;}// 去除滚动条上⽅多余显⽰::v-deep .el-table__header .has-gutter { display: none !important;}moz(⽕狐)// Firefox滚动条样式设置::v-deep .el-table__body-wrapper { overflow-y: scroll; scrollbar-color: #bebebf transparent; scrollbar-width: thin;}⽕狐⽬前只找到了 scrollbar-color 和 scrollbar-width 这两个属性,scrollbar-color 的第⼀个值是滚动条的颜⾊,第⼆个值是滚动条轨道背景⾊。
发布评论