使用 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
对应表尾背景色
<template>
<div>
<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"
:style="{
'--vxe-ui-table-header-background-color': headerBgColor,
'--vxe-ui-table-footer-background-color': footerBgColor
}">
</vxe-grid>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const headerBgColor = ref('')
const footerBgColor = ref('')
const gridOptions = reactive({
border: true,
showFooter: true,
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
],
footerData: [
{ seq: '合计', name: '777', sex: '333', age: '111' }
]
})
</script>
表格字体
--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>
<div>
<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 class="my-table-font-size" v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
border: true,
showFooter: true,
size: '',
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
],
footerData: [
{ seq: '合计', name: '777', sex: '333', age: '111' }
]
})
</script>
<style lang="scss" scoped>
.my-table-font-size {
--vxe-ui-font-size-default: 18px;
--vxe-ui-font-size-medium: 16px;
--vxe-ui-font-size-small: 14px;
--vxe-ui-font-size-mini: 12px;
}
</style>
字体颜色
--vxe-ui-table-header-font-color
对应表头字体颜色
--vxe-ui-table-footer-font-color
对应表尾字体颜色
<template>
<div>
<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"
:style="{
'--vxe-ui-font-color': bodyColor,
'--vxe-ui-table-header-font-color': headerColor,
'--vxe-ui-table-footer-font-color': footerColor
}">
</vxe-grid>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const headerColor = ref('#00BFFF')
const bodyColor = ref('#FF0000')
const footerColor = ref('#7CFC00')
const colorList = ref([
'#DC143C', '#FF1493', '#FF00FF', '#9932CC', '#6A5ACD',
'#0000FF', '#00008B', '#778899', '#1E90FF', '#00BFFF',
'#5F9EA0', '#00FFFF', '#008080', '#7FFFAA', '#3CB371',
'#8FBC8F', '#008000', '#7CFC00', '#556B2F', '#FFFFE0',
'#FFFF00', '#808000', '#EEE8AA', '#FFD700', '#FFA500',
'#FF4500', '#FA8072', '#FF0000', '#800000', '#C0C0C0'
])
const gridOptions = reactive({
border: true,
showFooter: true,
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
],
footerData: [
{ seq: '合计', name: '777', sex: '333', age: '111' }
]
})
</script>
单元格边框
--vxe-ui-table-border-color
对应表格边框颜色
--vxe-ui-table-border-width
对应表格边框宽度
<template>
<div>
<vxe-radio-group v-model="borderColor">
<vxe-radio-button label="" content="默认"></vxe-radio-button>
<vxe-radio-button label="#ff0000" content="红色"></vxe-radio-button>
<vxe-radio-button label="#0000ff" content="蓝色"></vxe-radio-button>
</vxe-radio-group>
<vxe-radio-group v-model="borderWidth">
<vxe-radio-button label="1px" content="1px"></vxe-radio-button>
<vxe-radio-button label="2px" content="2px"></vxe-radio-button>
<vxe-radio-button label="3px" content="3px"></vxe-radio-button>
</vxe-radio-group>
<vxe-grid
v-bind="gridOptions"
:style="{
'--vxe-ui-table-border-color': borderColor,
'--vxe-ui-table-border-width': borderWidth
}">
</vxe-grid>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const borderColor = ref('')
const borderWidth = ref('1px')
const gridOptions = reactive({
border: true,
showFooter: true,
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
],
footerData: [
{ seq: '合计', name: '777', sex: '333', age: '111' }
]
})
</script>
单元格高度
--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>
<div>
<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 class="my-table-row-height" v-bind="gridOptions"></vxe-grid>
</div>
</template>
<script setup>
import { reactive } from 'vue'
const gridOptions = reactive({
border: true,
showFooter: true,
size: '',
columns: [
{ field: 'seq', type: 'seq', width: 70 },
{ field: 'name', title: 'Name' },
{ field: 'sex', title: 'Sex' },
{ field: 'age', title: 'Age' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
{ id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
{ id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
{ id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
],
footerData: [
{ seq: '合计', name: '777', sex: '333', age: '111' }
]
})
</script>
<style lang="scss" scoped>
.my-table-row-height {
--vxe-ui-table-row-height-default: 80px;
--vxe-ui-table-row-height-medium: 60px;
--vxe-ui-table-row-height-small: 40px;
--vxe-ui-table-row-height-mini: 20px;
}
</style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期