js编辑只取修改后的对象的属性和值

news2024/11/20 22:41:12

需求：在el-table的列表编辑操作后，

第一步：获取当前行数据，为对象：{}，

第二步：数据回填

第三步：编辑

第四步：请求后端接口

本文章操作就是在编辑完成后，只取编辑过的值传给后端，为编辑过的值不需要传。

完整代码：

<!--
 * @Descripttion: js编辑只取修改后的对象的属性和值
 * @version:
 * @Author: 请叫我欧皇i
 * @email: 13071200550@163.com
 * @Date: 2023-11-13
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 原始值
      let obj = {
        name: "翠花",
        sex: 18,
        address: "湖北省武汉市",
      };
      //   修改后的值
      let updData = {
        name: "张三",
        sex: 18,
        address: "湖北省武汉市",
      };
      //   最后结果数据
      let result = {};
      for (const key in obj) {
        if (obj[key] !== updData[key]) {
          result[key] = updData[key];
        }
      }
      console.log(Object.keys(obj));
      if (Object.keys(result).length === 0) {
        console.log("无更改");
      } else {
        console.log(result, "结果返回");
      }
    </script>
  </body>
</html>

效果：