使用

DataTable有一个validate属性, 用于可编辑时提供验证规则, 如:

<DataTable
  validate={{
    fullName: (val, row, data) => {
      if (val === "") {
        return "姓名必须";
      }
    },
    age: (val, row, data) => {
      if (val === "") {
        return "年龄必须";
      }
      if (Number(val) > 200) {
        return "值不能大于200";
      }
    },
  }}
/>

每次调用DataTableaddRow()changeRow() API时会自动执行验证.

可编辑表格

在列定义为列定义编辑组件和显示组件即可实现可编辑表格的功能.
datatable组件内置了改变集缓存功能, 且只有发生改变的行会被缓存, 网络传输只会传输改变集, 未修改的数据不会传输, 因此即便数据源很大也不受其影响.
datatable组件会将改变集分门别类为: 新增的, 修改的, 删除的三类. 方便执行数据库的映射修改工作.

保存的数据结构查看底部的输出
  • 名字,年龄和性别列允许编辑:
  • 名字列使用TextInput作为编辑器;
  • 年龄列使用NumberInput作为编辑器,同时启用了自定义输入验证: 不能大于200;
  • 性别列使用下拉选择作为编辑器。
个人信息
ID
姓名
年龄
性别
无数据
output: