使用 vxe-table 修改css默认样式，修改边框背景色，单元格默认高度详细说明

使用 vxe-table 修改css默认样式，修改边框背景色，单元格默认高度详细说明
由于项目的需求，可能需要对默认的表格样式就行修改覆盖，但是又不想影响到原有的功能，这时候就可以通过自带的 css 变量来修改样式，非常简单就能修改。
通过 css 变量可以非常灵活的实现局部修改，当个表格修改、全局修改样式。
查看官网：https://vxetable.cn
gitbub：https://github.com/x-extends/vxe-table
gitee：https://gitee.com/x-extends/vxe-table
背景色

--vxe-ui-table-header-background-color对应表头背景色
--vxe-ui-table-footer-background-color对应表尾背景色

1. <template>
2.   
3.     <vxe-radio-group v-model="headerBgColor">
4.       <vxe-radio-button label="" content="默认"></vxe-radio-button>
5.       <vxe-radio-button label="#f3cccc" content="红色"></vxe-radio-button>
6.       <vxe-radio-button label="#cbcbef" content="蓝色"></vxe-radio-button>
7.     </vxe-radio-group>
8.     <vxe-radio-group v-model="footerBgColor">
9.       <vxe-radio-button label="" content="默认"></vxe-radio-button>
10.       <vxe-radio-button label="#fbe8d7" content="橙色"></vxe-radio-button>
11.       <vxe-radio-button label="#fbd7f8" content="紫色"></vxe-radio-button>
12.     </vxe-radio-group>
14.     <vxe-grid
15.       v-bind="gridOptions"
16.       :>
17.     </vxe-grid>
18.   
19. </template>

复制代码

表格字体

--vxe-ui-font-size-default对应默认 size= 时的字体大小
--vxe-ui-font-size-medium对应默认 size=medium 时的字体大小
--vxe-ui-font-size-small对应默认 size=small 时的字体大小
--vxe-ui-font-size-mini对应默认 size=mini 时的字体大小

1. <template>
2.   
3.     <vxe-radio-group v-model="gridOptions.size">
4.       <vxe-radio-button label="" content="默认"></vxe-radio-button>
5.       <vxe-radio-button label="medium" content="中"></vxe-radio-button>
6.       <vxe-radio-button label="small" content="小"></vxe-radio-button>
7.       <vxe-radio-button label="mini" content="迷你"></vxe-radio-button>
8.     </vxe-radio-group>
10.     <vxe-grid  v-bind="gridOptions"></vxe-grid>
11.   
12. </template>

复制代码

字体颜色

--vxe-ui-table-header-font-color对应表头字体颜色
--vxe-ui-table-footer-font-color对应表尾字体颜色

1. <template>
2.   
3.     <vxe-color-picker v-model="headerColor" :colors="colorList" clearable></vxe-color-picker>
4.     <vxe-color-picker v-model="bodyColor" :colors="colorList" clearable></vxe-color-picker>
5.     <vxe-color-picker v-model="footerColor" :colors="colorList" clearable></vxe-color-picker>
7.     <vxe-grid
8.       v-bind="gridOptions"
9.       :>
10.     </vxe-grid>
11.   
12. </template>

复制代码

单元格边框

--vxe-ui-table-border-color对应表格边框颜色
--vxe-ui-table-border-width对应表格边框宽度

1. <template>
2.   
3.     <vxe-radio-group v-model="headerBgColor">
4.       <vxe-radio-button label="" content="默认"></vxe-radio-button>
5.       <vxe-radio-button label="#f3cccc" content="红色"></vxe-radio-button>
6.       <vxe-radio-button label="#cbcbef" content="蓝色"></vxe-radio-button>
7.     </vxe-radio-group>
8.     <vxe-radio-group v-model="footerBgColor">
9.       <vxe-radio-button label="" content="默认"></vxe-radio-button>
10.       <vxe-radio-button label="#fbe8d7" content="橙色"></vxe-radio-button>
11.       <vxe-radio-button label="#fbd7f8" content="紫色"></vxe-radio-button>
12.     </vxe-radio-group>
14.     <vxe-grid
15.       v-bind="gridOptions"
16.       :>
17.     </vxe-grid>
18.   
19. </template>

复制代码

单元格高度

--vxe-ui-table-row-height-default对应 size= 时的单元格默认高度
--vxe-ui-table-row-height-medium对应 size=medium 时的单元格默认高度
--vxe-ui-table-row-height-small: 40px对应 size=small 时的单元格默认高度
--vxe-ui-table-row-height-mini: 20px对应 size=mini 时的单元格默认高度

1. <template>
2.   
3.     <vxe-radio-group v-model="gridOptions.size">
4.       <vxe-radio-button label="" content="默认"></vxe-radio-button>
5.       <vxe-radio-button label="medium" content="中"></vxe-radio-button>
6.       <vxe-radio-button label="small" content="小"></vxe-radio-button>
7.       <vxe-radio-button label="mini" content="迷你"></vxe-radio-button>
8.     </vxe-radio-group>
10.     <vxe-grid  v-bind="gridOptions"></vxe-grid>
11.   
12. </template>

复制代码

https://gitee.com/x-extends/vxe-table

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