修改 vxe-table vue 表格数据校验提示框样式

在表格内编辑数据时，校验提示是引导用户正确输入的重要手段。vxe-table 提供了便捷的 CSS 变量方案，让你无需编写复杂的样式覆盖代码，即可调整校验提示框的字体大小、内边距等样式，使其与项目整体视觉风格保持一致。

CSS 变量

vxe-table 的校验提示框（单元格校验错误信息）支持以下 CSS 变量：

CSS 变量	说明	默认值
--vxe-ui-table-validate-error-font-size	校验错误信息的字体大小	跟随主题
--vxe-ui-table-validate-error-padding	校验错误信息的内边距	跟随主题
--vxe-ui-table-validate-error-color	校验错误信息的文字颜色	跟随主题

通过在 或 组件上设置 style 属性，即可覆盖这些变量。

代码

<template>
  <div>
    <div>
      字体：<vxe-radio-group v-model="validFontSize">
        <vxe-radio-button checked-value="12px" content="12px"></vxe-radio-button>
        <vxe-radio-button checked-value="13px" content="13px"></vxe-radio-button>
        <vxe-radio-button checked-value="14px" content="14px"></vxe-radio-button>
        <vxe-radio-button checked-value="15px" content="15px"></vxe-radio-button>
        <vxe-radio-button checked-value="16px" content="16px"></vxe-radio-button>
      </vxe-radio-group>
      边距：<vxe-radio-group v-model="validPadding">
        <vxe-radio-button checked-value="2px" content="2px"></vxe-radio-button>
        <vxe-radio-button checked-value="4px" content="4px"></vxe-radio-button>
        <vxe-radio-button checked-value="6px" content="6px"></vxe-radio-button>
        <vxe-radio-button checked-value="8px" content="8px"></vxe-radio-button>
        <vxe-radio-button checked-value="10px" content="10px"></vxe-radio-button>
        <vxe-radio-button checked-value="12px" content="12px"></vxe-radio-button>
        <vxe-radio-button checked-value="14px" content="14px"></vxe-radio-button>
      </vxe-radio-group>
    </div>
    <div>
      <vxe-button status="primary" @click="fullValidEvent">校验</vxe-button>
    </div>
    <vxe-grid
      ref="gridRef"
      v-bind="gridOptions"
      :style="{
        '--vxe-ui-table-validate-error-font-size': validFontSize,
        '--vxe-ui-table-validate-error-padding': validPadding
      }"
    >
    </vxe-grid>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { VxeUI } from 'vxe-table'

const gridRef = ref()

const validFontSize = ref('14px')
const validPadding = ref('6px')

const gridOptions = reactive({
  border: true,
  showOverflow: true,
  keepSource: true,
  height: 300,
  editConfig: {
    trigger: 'click',
    mode: 'row',
    showStatus: true
  },
  editRules: {
    name: [{ required: true, message: '必须填写必须填写必须填写' }],
    role: [{ required: true, message: '必须填写' }]
  },
  columns: [
    { type: 'checkbox', width: 60 },
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name', editRender: { name: 'VxeInput' } },
    { field: 'role', title: 'Role', editRender: { name: 'VxeInput' } },
    { field: 'sex', title: 'Sex', editRender: { name: 'VxeInput' } },
    { field: 'age', title: 'Age', editRender: { name: 'VxeInput' } },
    { field: 'date', title: 'Date', editRender: { name: 'VxeInput' } }
  ],
  data: [
    { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
    { id: 10002, name: '', role: '', sex: '1', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: '', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: '', age: 23, address: 'test abc' },
    { id: 10005, name: '', role: '', sex: '1', age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' }
  ]
})

const fullValidEvent = async () => {
  const $grid = gridRef.value
  if ($grid) {
    const errMap = await $grid.validate(true)
    if (errMap) {
      VxeUI.modal.message({ status: 'error', content: '校验不通过！' })
    } else {
      VxeUI.modal.message({ status: 'success', content: '校验成功！' })
    }
  }
}
</script>

全局设置

在全局样式文件中直接覆盖 CSS 变量，所有表格将统一应用：

/* global.css */
:root {
  --vxe-ui-table-validate-error-font-size: 14px;
  --vxe-ui-table-validate-error-padding: 8px 12px;
  --vxe-ui-table-validate-error-color: #f56c6c;
  --vxe-ui-table-validate-error-bg-color: #fef0f0; /* 需自行添加，默认无背景 */
}

通过 CSS 变量，vxe-table 的表格校验提示框样式定制变得非常简单。

https://vxetable.cn