vxe-table自定义数据校验

vxe-table是一个基于Vue.js的表格组件库，它提供了丰富的功能和灵活的配置选项。其中，自定义数据校验是vxe-table的一个重要功能之一，它可以帮助我们在表格中对数据进行自定义的校验和验证。

自定义数据校验的实现需要通过vxe-table的校验规则配置项来完成。我们可以通过设置校验规则的type属性来指定校验类型，例如：required（必填）、number（数字）、email（邮箱）等等。同时，我们还可以通过设置validator属性来指定自定义的校验函数，该函数接收两个参数：value（当前单元格的值）和rule（当前校验规则的配置项），并返回一个布尔值，表示校验结果是否通过。

下面是一个示例代码，演示了如何在vxe-table中实现自定义数据校验：

<template>
  <vxe-table :data="tableData" :edit-config="{trigger: 'click'}">
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="age" title="年龄" edit-render="{name: 'input'}" :edit-rules="{validator: checkAge}"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {name: '张三', age: 18},
        {name: '李四', age: 20},
        {name: '王五', age: 22},
      ]
    }
  },
  methods: {
    checkAge(value, rule) {
      if (value < 18 || value > 60) {
        return false;
      }
      return true;
    }
  }
}
</script>

在上面的代码中，我们通过设置edit-rules属性来指定了自定义的校验函数checkAge，并将该函数绑定到了年龄列的编辑配置中。当用户在表格中编辑年龄单元格时，vxe-table会自动调用checkAge函数进行校验，并根据返回值来判断校验结果是否通过。