找回密码
 立即注册
首页 资源区 代码 vxe-table 修改表格样式,修改边字体、框、背景色等样式 ...

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

老僻贞 3 天前
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;
1.png
  1. <template>
  2.   
  3.     <vxe-grid  v-bind="gridOptions"></vxe-grid>
  4.   
  5. </template>
复制代码
修改字体颜色

css 变量 如下:
--vxe-ui-font-color: #00BFFF;
--vxe-ui-table-header-font-color:  #FF0000;
--vxe-ui-table-footer-font-color:  #7CFC00;
2.png
  1. <template>
  2.   
  3.     <vxe-grid  v-bind="gridOptions"></vxe-grid>
  4.   
  5. </template>
复制代码
修改单元格边框

css 变量 如下:
--vxe-ui-table-border-color: #ff0000;
--vxe-ui-table-border-width: #0000ff;
3.png
  1. <template>
  2.   
  3.     <vxe-grid  v-bind="gridOptions"></vxe-grid>
  4.   
  5. </template>
复制代码
表格背景色

css 变量 如下:
--vxe-ui-table-header-background-color: #f3cccc;
--vxe-ui-layout-background-color: #ffffff;
--vxe-ui-table-footer-background-color: #fbe8d7;
4.png
  1. <template>
  2.   
  3.     <vxe-grid  v-bind="gridOptions"></vxe-grid>
  4.   
  5. </template>
复制代码
https://github.com/x-extends/vxe-table

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

相关推荐

您需要登录后才可以回帖 登录 | 立即注册