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

阎逼 · 前天 19:25

使用 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对应表尾背景色

<template>
<vxe-radio-group v-model="headerBgColor">
<vxe-radio-button label="" content="默认"></vxe-radio-button>
<vxe-radio-button label="#f3cccc" content="红色"></vxe-radio-button>
<vxe-radio-button label="#cbcbef" content="蓝色"></vxe-radio-button>
</vxe-radio-group>
<vxe-radio-group v-model="footerBgColor">
<vxe-radio-button label="" content="默认"></vxe-radio-button>
<vxe-radio-button label="#fbe8d7" content="橙色"></vxe-radio-button>
<vxe-radio-button label="#fbd7f8" content="紫色"></vxe-radio-button>
</vxe-radio-group>
<vxe-grid
v-bind="gridOptions"
:>
</vxe-grid>
</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 时的字体大小

<template>
<vxe-radio-group v-model="gridOptions.size">
<vxe-radio-button label="" content="默认"></vxe-radio-button>
<vxe-radio-button label="medium" content="中"></vxe-radio-button>
<vxe-radio-button label="small" content="小"></vxe-radio-button>
<vxe-radio-button label="mini" content="迷你"></vxe-radio-button>
</vxe-radio-group>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</template>

复制代码

字体颜色

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

<template>
<vxe-color-picker v-model="headerColor" :colors="colorList" clearable></vxe-color-picker>
<vxe-color-picker v-model="bodyColor" :colors="colorList" clearable></vxe-color-picker>
<vxe-color-picker v-model="footerColor" :colors="colorList" clearable></vxe-color-picker>
<vxe-grid
v-bind="gridOptions"
:>
</vxe-grid>
</template>

复制代码

单元格边框

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

<template>
<vxe-radio-group v-model="headerBgColor">
<vxe-radio-button label="" content="默认"></vxe-radio-button>
<vxe-radio-button label="#f3cccc" content="红色"></vxe-radio-button>
<vxe-radio-button label="#cbcbef" content="蓝色"></vxe-radio-button>
</vxe-radio-group>
<vxe-radio-group v-model="footerBgColor">
<vxe-radio-button label="" content="默认"></vxe-radio-button>
<vxe-radio-button label="#fbe8d7" content="橙色"></vxe-radio-button>
<vxe-radio-button label="#fbd7f8" content="紫色"></vxe-radio-button>
</vxe-radio-group>
<vxe-grid
v-bind="gridOptions"
:>
</vxe-grid>
</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 时的单元格默认高度

<template>
<vxe-radio-group v-model="gridOptions.size">
<vxe-radio-button label="" content="默认"></vxe-radio-button>
<vxe-radio-button label="medium" content="中"></vxe-radio-button>
<vxe-radio-button label="small" content="小"></vxe-radio-button>
<vxe-radio-button label="mini" content="迷你"></vxe-radio-button>
</vxe-radio-group>
<vxe-grid v-bind="gridOptions"></vxe-grid>
</template>

复制代码

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

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

账号		自动登录	找回密码
密码			立即注册

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

浏览过的版块

签约作者