在本文中，我们将深入探讨如何在使用Element Plus的`el-table`组件实现树形表格时进行表单验证以及如何生成序号。`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。
### 一、树形列表生成序号
生成树形列表的序号是为了便于在表单验证中定位特定行数据，尤其是在进行添加、删除或修改操作时。以下是一个用于生成序号的函数`setIndex`：
```javascript
setIndex = (data) => {
let queue = [...data];
let loop = 0;
while (queue.length > 0) {
loop++;
[...queue].forEach((child, i) => {
queue.shift();
if (loop == 1) {
child.customIndex = i + 1 + "";
child.currentIndex = i;
}
if (child.children && child.children.length > 0) {
child.dataType = 1;
for (let ci = 0; ci < child.children.length; ci++) {
child.children[ci].currentIndex = ci;
child.children[ci].customIndex = child.customIndex + "." + (ci + 1);
}
queue.push(...child.children);
} else {
child.dataType = 2;
}
});
}
}
```
这个函数使用广度优先遍历（BFS）策略，为树形结构的每一层元素生成索引。`customIndex`字段存储了类似“1.1.1”这样的层次结构序号，而`currentIndex`则存储当前元素在同级中的位置。如果一个节点有子节点，`dataType`会被设置为1，否则设置为2，以区分是否为叶子节点。
### 二、表单验证
在`el-table`中进行表单验证，需要利用`el-form`和`el-form-item`组件。每个表格列都应该用`el-form-item`包裹，以定义验证规则。以下是一个简单的例子：
```html
<el-form ref="form" :model="form" label-width="80px" :rules="rules">
<el-form-item label-width="0" prop="rows">
<el-table>
<!-- 表格列定义 -->
</el-table>
</el-form-item>
</el-form>
```
这里的`form`是表单数据对象，`rules`是验证规则对象，`rows`属性对应`el-table`中的数据数组。在实际应用中，你需要根据业务需求定义具体的验证规则，例如：
```javascript
const rules = {
rows: [
{
children: [
{ name: { required: true, message: '名称不能为空', trigger: 'blur' } },
// 其他列的验证规则
],
},
],
};
```
这将确保表格中的每个子项（包括子级的子项）的`name`字段都是必填的。触发器`trigger`可以设置为`blur`（失去焦点时验证）或`change`（值改变时验证）等。
### 三、总结
在处理树形表格的表单验证时，生成序号和使用`el-form`组件是两个关键步骤。序号用于标识表格中的特定行，方便进行验证和操作。而`el-form`和`el-form-item`则提供了对表格内每个单元格的验证支持，确保数据输入的有效性。结合这两个方面，可以构建出高效且健壮的树形表格表单验证系统。
