vxe-table 修改表格样式，修改边字体、框、背景色

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;

<template>
  <div>
    <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>

修改字体颜色

css 变量 如下：
--vxe-ui-font-color: #00BFFF;
--vxe-ui-table-header-font-color: #FF0000;
--vxe-ui-table-footer-font-color: #7CFC00;

<template>
  <div>
    <vxe-grid class="my-table-font-color" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

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>

<style lang="scss" scoped>
.my-table-font-color {
	--vxe-ui-font-color: #00BFFF;
	--vxe-ui-table-header-font-color: #FF0000;
	--vxe-ui-table-footer-font-color: #7CFC00;
}
</style>

修改单元格边框

css 变量 如下：
--vxe-ui-table-border-color: #ff0000;
--vxe-ui-table-border-width: #0000ff;

<template>
  <div>
    <vxe-grid class="my-table-border-color" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

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>

<style lang="scss" scoped>
.my-table-border-color {
	--vxe-ui-table-border-color: #ff0000;
	--vxe-ui-table-border-width: #0000ff;
}
</style>

表格背景色

css 变量 如下：
--vxe-ui-table-header-background-color: #f3cccc;
--vxe-ui-layout-background-color: #ffffff;
--vxe-ui-table-footer-background-color: #fbe8d7;

<template>
  <div>
    <vxe-grid class="my-table-bg" v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

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>

<style lang="scss" scoped>
.my-table-bg {
  --vxe-ui-table-header-background-color: #f3cccc;
  --vxe-ui-layout-background-color: #ffffff;
  --vxe-ui-table-footer-background-color: #fbe8d7;
}
</style>

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