vxe-table 如何修改行高

原创已于 2022-03-10 10:39:55 修改 · 9.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript

于 2021-12-20 17:25:01 首次发布

vue系列专栏收录该内容

31 篇文章

订阅专栏

本文介绍如何通过覆盖CSS样式来调整VXE-Table组件的行高，并提供了一个更简便的方法，即直接在组件中配置行高的属性。

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

参考：https://blog.csdn.net/pengain/article/details/113244943

vxe-table 默认的行高有48px，比较高，如果我们想调整它的高，官网上没有提供例子，这时候我们需要覆盖css样式来解决这个问题。
1.新建style.css

/*vxe-table 自定义行高 */
.vxe-table .vxe-body--column.col--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 .vxe-body--column.col--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;
}
/*调整表头首行  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;
}

上面直接修改样式虽然可以解决问题，但是不是最好的。最后终于被我发现了原来官网API 已经提供了方法，并不需要那么繁琐去改样式。

<vxe-grid
	:row-config="{height: 28, isCurrent: true, isHover: true}"
>
</vxe-grid>