老僻贞 发表于 2025-12-30 13:05:00

vxe-table 修改表格样式，修改边字体、框、背景色等样式的用法

vxe-table 修改表格样式，修改边字体、框、背景色等样式的用法，支持 css 变量和 scss 主题变量，可以非常方便的对样式进行全局修改和局部修改。
https://vxetable.cn
修改字体大小

css 变量 如下：
--vxe-ui-font-size-default: 18px;
--vxe-ui-font-size-medium: 16px;
--vxe-ui-font-size-small: 14px;
--vxe-ui-font-size-mini: 12px;

<template>

    <vxe-gridv-bind="gridOptions"></vxe-grid>

</template>修改字体颜色

css 变量 如下：
--vxe-ui-font-color: #00BFFF;
--vxe-ui-table-header-font-color:#FF0000;
--vxe-ui-table-footer-font-color:#7CFC00;

<template>

    <vxe-gridv-bind="gridOptions"></vxe-grid>

</template>修改单元格边框

css 变量 如下：
--vxe-ui-table-border-color: #ff0000;
--vxe-ui-table-border-width: #0000ff;

<template>

    <vxe-gridv-bind="gridOptions"></vxe-grid>

</template>表格背景色

css 变量 如下：
--vxe-ui-table-header-background-color: #f3cccc;
--vxe-ui-layout-background-color: #ffffff;
--vxe-ui-table-footer-background-color: #fbe8d7;

<template>

    <vxe-gridv-bind="gridOptions"></vxe-grid>

</template>https://github.com/x-extends/vxe-table

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

史穹逊 发表于 2026-1-6 12:11:58

yyds。多谢分享

少琼 发表于 2026-1-8 10:07:28

用心讨论，共获提升！

苗嘉惠 发表于 2026-1-13 19:42:53

懂技术并乐意极积无私分享的人越来越少。珍惜

泠邸 发表于 2026-1-17 15:31:28

用心讨论，共获提升！

臧莞然 发表于 2026-1-19 00:22:24

东西不错很实用谢谢分享

肿圬后 发表于 2026-1-20 20:46:49

东西不错很实用谢谢分享

佴莘莘 发表于 2026-1-23 06:16:11

感谢分享，学习下。

鞭氅 发表于 4 天前

收藏一下   不知道什么时候能用到

沦嘻亟 发表于 8 小时前

很好很强大我过来先占个楼 待编辑
页: [1]
查看完整版本: vxe-table 修改表格样式，修改边字体、框、背景色等样式的用法