需求:在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>
效果:
文章到此结束,希望对你有所帮助~