vxe-table如何修改⾏⾼
vxe-table 默认的⾏⾼有48px，⽐较⾼，如果我们想调整它的⾼，官⽹上没有提供例⼦，这时候我们需要覆盖css样式来解决这个问题。
1.新建style.css
/*vxe-table ⾃定义⾏⾼ */
.vxe-table .l--ellipsis{
height: 28px;
}
.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;
height: 28px;
}
2、到main.js 将style.css进⾏全局引⼊
import'@/views/common/css/style.css'
上⾯的⽅式只能针对某些个可以使⽤，有时候grid并不⽣效，参数配置都⼀样就是不⽣效，具体不知道什么原因
终极版
1.新建style.css
.tdStyle /deep/ .vxe-table .l--ellipsis{
height: 28px;
}
2、到main.js 将style.css进⾏全局引⼊
import'@/views/common/css/style.css'
在每个<vxe-grid> 标签内添加class=“tdStyle”
加餐：其他样式调整
/*修改表头背景⾊*/
.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;
css设置表格滚动条
}
/*调整表头⾸⾏  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;
}
.w--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-wrap per{
background-color: #113238;
}
/*有垂直垂直下拉时右上⾓处多出块状背景⾊调整*/
.vxe-table--header-wrapper{
background-color: transparent !important;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。