在使用 vxe-form 和 vxe-table 组件时，常常需要对表单数据进行校验并根据校验结果动态修改表单样式（如错误提示样式、输入框边框颜色等）。为了自定义表单的主题样式，可以通过以下步骤来修改：

1. 安装 vxe-table 和 vxe-form

首先，你需要确保项目中已经正确安装了 vxe-table 和 vxe-form 组件：

npm install vxe-table vxe-form

在你的项目中引入并配置 vxe-table 和 vxe-form：

import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'

Vue.use(VXETable)

2. 使用 vxe-form 和 vxe-table

vxe-form 是表单组件，vxe-table 是表格组件。你可以将它们一起使用，在表格中展示表单数据并进行验证。

<template>
  <vxe-form ref="form" :rules="rules" v-model="formData">
    <vxe-form-item label="姓名" field="name">
      <vxe-input v-model="formData.name"></vxe-input>
    </vxe-form-item>
    <vxe-form-item label="年龄" field="age">
      <vxe-input v-model="formData.age" type="number"></vxe-input>
    </vxe-form-item>
    <vxe-button @click="submitForm">提交</vxe-button>
  </vxe-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: ''
      },
      rules: {
        name: [
          { required: true, message: '姓名不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '姓名长度在3到10个字符之间', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '年龄不能为空', trigger: 'blur' },
          { type: 'number', message: '年龄必须是数字', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log('提交成功', this.formData);
        } else {
          console.log('表单验证失败');
        }
      })
    }
  }
}
</script>

3. 修改校验错误时的主题样式

要修改 vxe-form 校验失败时的样式，可以使用 CSS 样式进行自定义。

3.1 修改表单校验错误提示样式

你可以通过覆盖 vxe-form 组件的默认样式，来修改表单项的错误提示框和文本样式。

例如：

/* 修改错误提示的文字颜色 */
.vxe-form--item.is-error .vxe-form-item__error {
  color: #f56c6c;
  font-size: 12px;
}

/* 修改错误时输入框的边框颜色 */
.vxe-form--item.is-error .vxe-input--inner {
  border-color: #f56c6c;
}
  • .vxe-form--item.is-error 代表表单项处于错误状态。
  • .vxe-form-item__error 是错误信息显示的容器，通常是红色的。
  • .vxe-input--inner 是输入框的边框部分。

3.2 修改验证通过时的样式

同样，你可以为验证通过的表单项设置样式：

/* 修改验证成功时输入框的边框颜色 */
.vxe-form--item.is-success .vxe-input--inner {
  border-color: #67c23a;
}

/* 修改成功提示文字颜色 */
.vxe-form--item.is-success .vxe-form-item__error {
  color: #67c23a;
}

3.3 全局覆盖样式

如果你希望全局统一修改 vxe-form 的样式，可以将这些样式放在全局的 CSS 文件中，或者在 Vue 的 <style> 标签中添加 scoped 样式。

<style scoped>
.vxe-form--item.is-error .vxe-form-item__error {
  color: #f56c6c;
  font-size: 12px;
}
.vxe-form--item.is-error .vxe-input--inner {
  border-color: #f56c6c;
}
.vxe-form--item.is-success .vxe-input--inner {
  border-color: #67c23a;
}
.vxe-form--item.is-success .vxe-form-item__error {
  color: #67c23a;
}
</style>

4. 使用 class 动态修改样式

你还可以通过动态 class 来控制表单项的样式。例如，在表单项验证时，使用 class 来控制某些样式的应用。

<vxe-form-item :class="{'is-error': errorName}" label="姓名" field="name">
  <vxe-input v-model="formData.name"></vxe-input>
</vxe-form-item>

<script>
export default {
  data() {
    return {
      formData: {
        name: ''
      },
      errorName: false
    };
  },
  methods: {
    validateForm() {
      if (!this.formData.name) {
        this.errorName = true;
      }
    }
  }
}
</script>

在这里，is-error 样式会在 errorName 为 true 时被动态应用。

5. 总结

通过 CSS 自定义样式和 vxe-form 提供的类名，你可以轻松定制表单校验失败时的样式。主要步骤包括：

  1. 覆盖 .vxe-form--item.is-error 和 .vxe-form-item__error 来修改错误提示的样式。
  2. 使用 .vxe-form--item.is-success 来修改成功时的样式。
  3. 如果需要，还可以通过动态 class 或 style 来控制每个表单项的样式。

这种方法非常灵活，可以根据不同的 UI 需求进行调整。

如果你有更具体的样式需求，随时告诉我！