vxe-table 修改表格样式，修改边字体、框、背景色等样式的用法
<p>vxe-table 修改表格样式，修改边字体、框、背景色等样式的用法，支持 css 变量和 scss 主题变量，可以非常方便的对样式进行全局修改和局部修改。</p><p>https://vxetable.cn</p>
<h2 id="修改字体大小">修改字体大小</h2>
<p>css 变量 如下：<br>
--vxe-ui-font-size-default: 18px;<br>
--vxe-ui-font-size-medium: 16px;<br>
--vxe-ui-font-size-small: 14px;<br>
--vxe-ui-font-size-mini: 12px;</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251230103608927-1507849859.png"></p>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="修改字体颜色">修改字体颜色</h2>
<p>css 变量 如下：<br>
--vxe-ui-font-color: #00BFFF;<br>
--vxe-ui-table-header-font-color:#FF0000;<br>
--vxe-ui-table-footer-font-color:#7CFC00;</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251230103619405-1989739558.png"></p>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="修改单元格边框">修改单元格边框</h2>
<p>css 变量 如下：<br>
--vxe-ui-table-border-color: #ff0000;<br>
--vxe-ui-table-border-width: #0000ff;</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251230103629198-1571166031.png"></p>
<pre><code class="language-html"><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>
</code></pre>
<h2 id="表格背景色">表格背景色</h2>
<p>css 变量 如下：<br>
--vxe-ui-table-header-background-color: #f3cccc;<br>
--vxe-ui-layout-background-color: #ffffff;<br>
--vxe-ui-table-footer-background-color: #fbe8d7;</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202512/3563285-20251230103644261-1474508873.png"></p>
<pre><code class="language-html"><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>
</code></pre>
<p>https://github.com/x-extends/vxe-table</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19419859
頁:
[1]