vue table 校验

Vue表格的校验可以通过以下几种方式实现：

1. 使用表单验证库：你可以使用像 VeeValidate 或 vuelidate 这样的表单验证库，这些库可以帮助你轻松地实现表格数据的校验。

2. 自定义校验方法：你可以在 Vue 组件中编写自定义校验方法，这需要你手动编写校验逻辑，并在需要的地方调用该方法。

3. 使用表格组件自带的校验功能：一些表格组件，如 Element UI 的表格，提供了自带的校验功能。你可以在表格的列定义中添加校验规则，然后在表格中输入数据时，会自动校验并提示错误信息。

下面是一个使用 VeeValidate 库实现表格校验的例子：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>
            <input v-model="item.name" />
            <span v-if="errors.has(`name.${index}`)">{{ errors.first(`name.${index}`) }}</span>
          </td>
          <td>
            <input v-model.number="item.age" />
            <span v-if="errors.has(`age.${index}`)">{{ errors.first(`age.${index}`) }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { required, numeric } from 'vee-validate/dist/rules';
import { extend, localize } from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN.json';
import { ValidationObserver, ValidationProvider } from 'vee-validate';

extend('required', required);
extend('numeric', numeric);

localize('zh_CN', zh_CN);

export default {
  components: {
    ValidationObserver,
    ValidationProvider,
  },
  data() {
    return {
      tableData: [
        { name: '', age: '' },
        { name: '', age: '' },
        { name: '', age: '' },
      ],
    };
  },
  methods: {
    onSubmit() {
      // 处理表单提交
    },
  },
};
</script>

在这个例子中，我们使用了 VeeValidate 库来实现表格的校验。我们在组件中引入了 ValidationObserver 和 ValidationProvider 组件，并使用 extend 方法扩展了 required 和 numeric 两个校验规则。我们还通过 localize 方法设置了校验信息的本地化。

在模板中，我们使用 v-for 指令渲染了表格数据，并为每个 input 元素绑定了 v-model。我们还为每个 input 元素绑定了一个错误信息的 span 元素，用来显示校验错误信息。

最后，我们在组件的方法中编写了一个 onSubmit 方法，用来处理表格提交事件。在该方法中，我们可以获取到表格数据，进行进一步处理。