vxe-table 表格样式调整
首先上图,简单截了个图,下图为调整后的样式,其实就是按界面环境,对表格颜色、字号、行高进行了简单修改,对我一个非专业前端来说,凑合着用吧。表格代码如下:<vxe-table :data="fztzList"height='150px'border><vxe-table-column field="名称" title="名称" /><vxe-table-column f
·
首先上图,简单截了个图,下图为调整后的样式,其实就是按界面环境,对表格颜色、字号、行高进行了简单修改,对我一个非专业前端来说,凑合着用吧。
表格代码如下:
<vxe-table :data="fztzList" height='150px' border>
<vxe-table-column field="名称" title="名称" />
<vxe-table-column field="类型" title="类型" width="150"/>
<vxe-table-column field="调整量" title="调整量" width="80"/>
</vxe-table>
样式代码如下:
/*修改表头背景色*/
.vxe-table--header-wrapper,.vxe-header--row,.vxe-table--header{
background-color: #2C3846;
}
/*调整表格行高*/
.vxe-table .vxe-body--column:not(.col--ellipsis), .vxe-table .vxe-footer--column:not(.col--ellipsis), .vxe-table .vxe-header--column:not(.col--ellipsis) {
padding: 5px 0;
}
/*调整表格 单元格背景颜色*/
.vxe-table .vxe-table--body-wrapper, .vxe-table .vxe-table--footer-wrapper {
background-color: #1B2838;
}
/*调整表格文字及位置*/
.vxe-table .vxe-body--column, .vxe-table .vxe-footer--column, .vxe-table .vxe-header--column {
position: relative;
line-height: 24px;
text-align: center;
color: #ffffff;
}
/*调整表头首行 line 的颜色*/
.vxe-table .vxe-table--header-wrapper .vxe-table--header-border-line {
position: absolute;
left: 0;
bottom: 0;
height: 0;
border-bottom: 1px solid #e8eaec;
}
.vxe-body--row.row--hover{
background-color: rgba(255,255,255,0.3) !important;
}
/*表格滚动条样式*/
.vxe-table--body-wrapper::-webkit-scrollbar{
width: 8px;
}
.vxe-table--body-wrapper::-webkit-scrollbar-thumb{
border-radius: 5px;
height: 50px;
background-color: #5C6974 !important;
border-radius: 30px !important;
}
.vxe-table--body-wrapper::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
background: rgba(0,0,0,0.4);
}
.vxe-table.border--default .vxe-table--header-wrapper, .vxe-table.border--full .vxe-table--header-wrapper, .vxe-table.border--outer .vxe-table--header-wrapper {
background-color: #113238;
}
/*有垂直 垂直下拉时 右上角处多出块状 背景色调整*/
.vxe-table--header-wrapper{
background-color: transparent !important;
}
更多推荐
已为社区贡献4条内容
所有评论(0)