vxe-table 表格样式调整

最新推荐文章于 2025-02-21 11:15:13 发布

悟●禅●酒

最新推荐文章于 2025-02-21 11:15:13 发布

阅读量1.5w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： html css

本文链接：https://blog.csdn.net/pengain/article/details/113244943

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用VxeTable组件进行表格样式定制的方法，包括调整表头背景色、表格行高、单元格背景颜色、文字颜色及位置等，特别适合非专业前端人员快速实现美观的表格展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先上图，简单截了个图，下图为调整后的样式，其实就是按界面环境，对表格颜色、字号、行高进行了简单修改，对我一个非专业前端来说，凑合着用吧。
在这里插入图片描述
表格代码如下：

<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;
}