300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > vue+element样式修改(表格错位问题 表头根据单词换行 滚动条样式)

vue+element样式修改(表格错位问题 表头根据单词换行 滚动条样式)

时间:2024-06-18 05:59:21

相关推荐

vue+element样式修改(表格错位问题 表头根据单词换行 滚动条样式)

1、/* 解决表格错位问题(表格数据过多会出现滚动条,当筛选后数据过少,没滚动条时会发生错位)*/

方式一:

.el-table th.gutter,

.el-table colgroup.gutter{

display: table-cell!important;

}

/解决表格错位问题end/

方式二:

// 解决表格错位问题(火狐浏览器)

.ai-table–border th.gutter:last-of-type {

display: block!important;

width: 17px!important;

}

方式三:

qtable为表格上ref,在请求到表格数据赋值之后,进行执行下面代码

this.$nextTick(() => {this.$refs.qtable.doLayout();});

2、/* 表格表头根据单词换行样式/

.el-table th>.cell{

word-break: break-word;

}

/表头单词换行end*/

3、/滚动条 begin/

*(通配符选择器) {

scrollbar-face-color: #cccccc;

/面子/

scrollbar-arrow-color: #fff;

/箭头/

scrollbar-3dlight-color: #ccc;

/最外左/

scrollbar-highlight-color: #ccc;

/左二/

scrollbar-shadow-color: #ccc;

/右二/

scrollbar-darkshadow-color: #ccc;

/右一/

scrollbar-track-color: #eeeeee;

/滑道/

}

::-webkit-scrollbar {

width: 6px;

height: 10px;

}

/滚动条宽度/

/滚动条按钮/

/滑道全部/

::-webkit-scrollbar-track-piece {

background-color: #fff0 ;

/滑道/

-webkit-border-radius: 0;

/滑道圆角宽度/

}

::-webkit-scrollbar-thumb {

background-color: #ccc;

/滑动条表面/

border: solid 2px #ccc;

/滑动条边框/

border-radius: 7px;

/滑动条圆角宽度/

}

/横竖滚动条交角/

::-webkit-scrollbar-corner {

background-color: none;

}

/横竖滚动条交角图案/

::-webkit-resizer {

background-repeat: no-repeat;

background-position: bottom right;

}

/鼠标滑过滑动条/

::-webkit-scrollbar-thumb:hover {

background-color: #bbb;

border: solid 2px #bbb;

/滑动条边框/

}

/滚动条 end/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。