组件化的可编辑数据表格

设计思路：

1. 创建一个可编辑表格组件，该组件可以接受表格数据、表头和相关的配置参数。
2. 组件内部渲染表格，并为每个单元格添加可编辑的属性，同时也添加删除按钮。
3. 监听表格的输入事件，检查输入的值是否合法，如果输入的值不合法，则清空该单元格的内容。如果输入的值合法，则将该单元格对应的数据存储到更新的数据数组中。
4. 监听表格的删除按钮事件，发送DELETE请求到服务器端删除该行数据。
5. 监听表格外部的点击事件，如果点击表格外部，将更新的数据数组发送到服务器端，更新数据。同时，清空更新的数据数组。

实现方法：

1. 创建一个可编辑表格组件，该组件可以接受表格数据、表头和相关的配置参数。

   • 在父组件中通过props传递数据和配置参数给子组件。
   • 子组件中通过接收props并使用状态管理表格数据和更新的数据。

2. 组件内部渲染表格，并为每个单元格添加可编辑的属性，同时也添加删除按钮。

   • 在render函数中使用map函数渲染表头和表格数据。
   • 为每个单元格添加contenteditable属性和输入监听事件，为删除按钮添加删除监听事件。

3. 监听表格的输入事件，检查输入的值是否合法，如果输入的值不合法，则清空该单元格的内容。如果输入的值合法，则将该单元格对应的数据存储到更新的数据数组中。

   • 在每个单元格的输入监听事件中，检查输入值是否合法，如果不合法，清空该单元格内容。如果合法，更新该单元格对应的数据到更新的数据数组中。

4. 监听表格的删除按钮事件，发送DELETE请求到服务器端删除该行数据。

   • 在删除按钮的监听事件中，获取该行对应的数据id，然后通过DELETE请求发送到服务器端删除该行数据。

5. 监听表格外部的点击事件，如果点击表格外部，将更新的数据数组发送到服务器端，更新数据。同时，清空更新的数据数组。

   • 在表格外部的点击监听事件中，如果点击的不是表格内部元素，将更新的数据数组发送到服务器端更新数据。同时，清空更新的数据数组。

定义一个个 ID 为 "studentTable" 的表格

 

 通过json-server获取学生数据和渲染学生数据

 

 添加编辑功能和数据修改限制

如果输入的不是数字或数字不在0-100的范围内，则清空该单元格 

 

 然后就会修改数据

 

 再将更新的数据存储到 updatedData 数组

 

 发送 DELETE 请求到 JSON Server 删除对应学生数据

 

当用户在表格之外点击时，我们要保存表格中已更改的数据。我们遍历 updatedData 数组，使用 fetch 发送 PATCH 请求到 JSON Server 更新每个学生的数据。在成功更新每个学生的数据之后，我们将 updatedData 数组清空。 

 

 这是一个辅助函数，用于根据表格列索引获取对应的字段名。在数据更新时，我们需要知道哪个字段被更改了。这个函数将返回相应的字段名，以便我们能够构建更新的学生对象。