使用 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>

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

posted @   可不简单  阅读(35)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
点击右上角即可分享
微信分享提示