vxe-table edit-rules

`edit-rules` 是 `vxe-table` 表格组件中用于校验和限制单元格编辑的属性。 它是一个数组，每一项都是一个对象，表示一个单元格的校验规则和限制条件。以下是一些常见的校验规则： - required：表示该单元格必须填写内容； - number：表示该单元格必须填写数字； - integer：表示该单元格必须填写整数； - email：表示该单元格必须填写正确的邮箱格式； - url：表示该单元格必须填写正确的URL格式； - min：表示该单元格填写的数字必须大于等于指定的最小值； - max：表示该单元格填写的数字必须小于等于指定的最大值； - length：表示该单元格填写的字符串长度必须在指定的范围内。 下面是一个例子，展示了如何使用 `edit-rules`： ```html <template> <vxe-table :data="tableData" :edit-config="{ trigger: 'click', mode: 'cell' }"> <vxe-column field="name" title="姓名" :edit-render="{ name: 'input', autofocus: true }" :edit-rules="{ required: true }"></vxe-column> <vxe-column field="age" title="年龄" :edit-render="{ name: 'input', type: 'number' }" :edit-rules="{ required: true, number: true, min: 0, max: 120 }"></vxe-column> <vxe-column field="email" title="邮箱" :edit-render="{ name: 'input' }" :edit-rules="{ required: true, email: true }"></vxe-column> <vxe-column field="phone" title="电话" :edit-render="{ name: 'input' }" :edit-rules="{ required: true, length: [11, 11] }"></vxe-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18, email: '[email protected]', phone: '13812345678' }, { name: '李四', age: 25, email: '[email protected]', phone: '13912345678' }, { name: '王五', age: 32, email: '[email protected]', phone: '15812345678' } ] } } } </script> ``` 在上面的例子中，我们为每一列都设置了 `edit-rules` 属性，表示该列的单元格编辑规则。例如，姓名列的单元格必须填写内容，年龄列的单元格必须填写数字，并且数字必须在 0 到 120 之间。 当用户编辑单元格时，`vxe-table` 会根据 `edit-rules` 的设置来校验单元格的内容，如果不符合校验规则，则无法保存修改。同时，`vxe-table` 也会根据 `edit-rules` 的设置来限制单元格的编辑操作，例如必填字段必须填写内容，否则无法保存修改。

您可以使用 `edit-rules` 属性来定义校验规则。在这个属性中，您可以使用正则表达式来校验输入的数据。假设您要校验输入是否为正整数，您可以这样定义： ```javascript edit-rules: { number: [ { pattern: /^[1-9]\d*$/, message: '请输入正整数' } ] } ``` 在这个例子中，我们定义了一个名为 `number` 的校验规则，其中 `pattern` 属性指定了正则表达式 `/^[1-9]\d*$/`，它可以匹配所有正整数。`message` 属性则指定了校验失败时的提示信息。 然后，在您的模板中，您可以使用 `rules` 属性来引用这个校验规则： ```html <template> <vxe-table :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"> <vxe-table-column field="number" title="数字" :edit-render="{name: 'input'}" :edit-rules="editRules.number"></vxe-table-column> </vxe-table> </template> ``` 在这个例子中，我们将 `edit-rules` 属性设置为 `editRules.number`，其中 `editRules` 是一个包含我们定义的校验规则的对象。这样，当用户在表格中编辑数字时，系统会自动校验输入的数据是否符合我们定义的规则。如果校验失败，系统会弹出一个提示框，显示我们定义的提示信息。