全方位理解Element表格验证和记录修改痕迹

2023-12-15 04:29:59

简介

Element表格是一个功能强大的前端组件，它可以帮助我们轻松构建具有验证功能的表单。此外，Element表格还支持记录用户的修改痕迹，这对于跟踪和审计表单数据非常有用。

验证规则的设置

Element表格的验证规则可以轻松设置，我们只需要在表格列的rules属性中指定相应的验证规则即可。例如，我们可以设置以下验证规则：

{
  required: true,
  message: '该字段不能为空',
  trigger: 'blur'
}

该验证规则要求字段不能为空，如果用户在离开该字段时未输入任何内容，则会显示该字段不能为空的错误信息。

修改痕迹的记录

Element表格还支持记录用户的修改痕迹。我们可以通过在表格的row-key属性中指定一个唯一的键值来实现修改痕迹的记录。例如，我们可以设置以下row-key属性：

rowKey: 'id'

当用户修改表格中的数据时，Element表格会自动记录下修改的痕迹。这些痕迹可以通过表格的getChanges方法获取。

const changes = table.getChanges();

getChanges方法返回一个数组，数组中的每个元素都是一个对象，该对象包含了修改的行的键值、修改前的数据和修改后的数据。

最终数据提交时的提示

在用户提交表单数据时，我们可以通过Element表格的before-submit事件来提示用户进行了哪些操作。例如，我们可以设置以下before-submit事件：

beforeSubmit(row, index, table) {
  const changes = table.getChanges();
  if (changes.length > 0) {
    const message = '您对以下数据进行了修改：\n';
    for (const change of changes) {
      message += `${change.key}: ${change.oldValue} -> ${change.newValue}\n`;
    }
    MessageBox.confirm(message, '确认提交', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      table.submit();
    }).catch(() => {});
  } else {
    table.submit();
  }
}