使用 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-gridv-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-gridv-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-gridv-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>
https://gitee.com/x-extends/vxe-table
