js树结构所有叶子节点的值相加等于父节点的值（2）？

Question

这是默认情况

麻烦根据我标的序号看下图，很重要

园区的count值也更新了，就是集团的没更新

=====

还有一个问题，就是当输入一个值的时候，所有变更过的地方都要显示一个红色的差值

需求是：输入框的值变动之后，所有值更新过的地方包括当前输入框都要与初始值计算差值，并且在下方显示+n或者-n，所以需要把初始化的数据存起来，因为每次都是跟初始化的数据对比，而不是上一次

然后我想就是初始化数据的时候把输入框的值都存起来，然后当输入的时候，计算之前输入框的差值，因为输入框+2的话其他地方也是+2，这个应该错不了

就是不知道怎么找到数据更新过的地方并且显示一个+n或者-n

======

这里是代码，麻烦帮忙修改一下

---

例子1
https://element-plus.run/#eyJ...

例子2
https://element-plus.run/#eyJ...

两个案例可以看看哪个好改一些，谢谢

Answer 1

calc 的逻辑混得比较多，我做了一个拆分，把不同的逻辑细节拆出去了。

• calcNode 专门用来计算某个节点内的计算数据（也就是几个 count）
• calcParent 专门用来找到父节点并进行计算
• calc 保留原来的接口，它会先计算当前节点再计算父节点

另外，getDiffVal 的本意应该是获取有变化的值。根据模板里的 type="danger"，而且没加条件，那说明这里是没有判断值是否存在变化的。只要动了 input 就一定会显示，这也是个 BUG。改过之后的 getDiffVal 会判断值是否变化，如果变化返回原值，否则返回 ""，这样 danger 才不会渲染出来。

最后是那个 map，这里我猜你是想保留原值，但是不知道为什么要在 change 里去计算它。原值保留着一直不变，只需要在 getDiffVal 的时候取出来用于比较就行。所以我重写了生成 map 的逻辑，并且改名为 originValues

其他细节不记得了，看 Demo 吧。

https://element-plus.run/#eyJBcHAudnVlIjoiPHRlbXBsYXRlPlxuICA8dWw+XG4gICAgPGxpPueItuiKgueCueeahOWAvOaYr+WtkOiKgueCueWAvOeahOWSjO+8jOS4jeWQq+WtmeWtkOiKgueCue+8jOi/meS4quebruWJjeaYr+WvueeahO+8jOS7peS4i+S4ieS4quaciemXrumimDwvbGk+XG4gICAgPGxpPmNvdW50MiA9bnVtMSArbnVtMjwvbGk+XG4gICAgPGxpPmNvdW50Mz1udW0zK251bTQ8L2xpPlxuICAgIDxsaT5jb3VudDEgPSBjb3VudDIrY291bnQzPC9saT5cbiAgPC91bD5cbiAgPGVsLXRhYmxlIDpkYXRhPVwidGFibGVEYXRhLnZhbHVlXCIgZGVmYXVsdC1leHBhbmQtYWxsIHJvdy1rZXk9XCJpZFwiPlxuICAgIDxlbC10YWJsZS1jb2x1bW4gcHJvcD1cImluZGV4XCIgbGFiZWw9XCLluo/lj7dcIiB0eXBlPVwiaW5kZXhcIiA6aW5kZXg9XCJpbmRleE1ldGhvZFwiIC8+XG4gICAgPGVsLXRhYmxlLWNvbHVtbiBwcm9wPVwidGl0bGVcIiBsYWJlbD1cIuWNleS9jeWQjeensFwiIHdpZHRoPVwiMTUwXCI+PC9lbC10YWJsZS1jb2x1bW4+XG4gICAgPGVsLXRhYmxlLWNvbHVtbiBwcm9wPVwiY291bnQxXCIgbGFiZWw9XCLnoJTnqbblvIDlj5Hmkp7lkJFjb3VudDFcIj48L2VsLXRhYmxlLWNvbHVtbj5cbiAgICA8ZWwtdGFibGUtY29sdW1uIHByb3A9XCJjb3VudDJcIiBsYWJlbD1cIueglOeptuW8gOWPkeaSnuWQkWNvdW50MlwiPjwvZWwtdGFibGUtY29sdW1uPlxuICAgIDxlbC10YWJsZS1jb2x1bW4gcHJvcD1cImNvdW50M1wiIGxhYmVsPVwi56CU56m25byA5Y+R5pKe5ZCRY291bnQzXCI+PC9lbC10YWJsZS1jb2x1bW4+XG4gICAgPGVsLXRhYmxlLWNvbHVtbiBsYWJlbD1cIuaAu+mDqOeuoeeQhuaIkOacrG51bTFcIj5cbiAgICAgIDx0ZW1wbGF0ZSAjZGVmYXVsdD1cInNjb3BlXCI+XG4gICAgICAgIDxwIHYtaWY9XCJzY29wZS5yb3cuY2hpbGRyZW5cIj57eyBzY29wZS5yb3cubnVtMSB9fTwvcD5cbiAgICAgICAgPHAgdi1lbHNlPlxuICAgICAgICAgIDxlbC1pbnB1dCB2LW1vZGVsLm51bWJlcj1cInNjb3BlLnJvdy5udW0xXCIgY2xlYXJhYmxlIEBpbnB1dD1cImNoYW5nZShzY29wZSwgJ251bTEnKVwiPjwvZWwtaW5wdXQ+XG4gICAgICAgIDwvcD5cbiAgICAgICAgPGVsLWxpbmsgdHlwZT1cImRhbmdlclwiPnt7IGdldERpZmZWYWwoc2NvcGUucm93Lm51bTEsIHNjb3BlLnJvdywgJ251bTEnKSB9fTwvZWwtbGluaz5cbiAgICAgIDwvdGVtcGxhdGU+XG4gICAgPC9lbC10YWJsZS1jb2x1bW4+XG5cbiAgICA8ZWwtdGFibGUtY29sdW1uIGxhYmVsPVwi5oC76YOo566h55CG5oiQ5pysbnVtMlwiPlxuICAgICAgPHRlbXBsYXRlICNkZWZhdWx0PVwic2NvcGVcIj5cbiAgICAgICAgPHAgdi1pZj1cInNjb3BlLnJvdy5jaGlsZHJlblwiPnt7IHNjb3BlLnJvdy5udW0yIH19PC9wPlxuICAgICAgICA8cCB2LWVsc2U+XG4gICAgICAgICAgPGVsLWlucHV0IHYtbW9kZWwubnVtYmVyPVwic2NvcGUucm93Lm51bTJcIiBjbGVhcmFibGUgQGlucHV0PVwiY2hhbmdlKHNjb3BlLCAnbnVtMicpXCI+PC9lbC1pbnB1dD5cbiAgICAgICAgPC9wPlxuICAgICAgPC90ZW1wbGF0ZT5cbiAgICA8L2VsLXRhYmxlLWNvbHVtbj5cbiAgICA8ZWwtdGFibGUtY29sdW1uIGxhYmVsPVwi5oC76YOo566h55CG5oiQ5pysbnVtM1wiPlxuICAgICAgPHRlbXBsYXRlICNkZWZhdWx0PVwic2NvcGVcIj5cbiAgICAgICAgPHAgdi1pZj1cInNjb3BlLnJvdy5jaGlsZHJlblwiPnt7IHNjb3BlLnJvdy5udW0zIH19PC9wPlxuICAgICAgICA8cCB2LWVsc2U+XG4gICAgICAgICAgPGVsLWlucHV0IHYtbW9kZWwubnVtYmVyPVwic2NvcGUucm93Lm51bTNcIiBjbGVhcmFibGUgQGlucHV0PVwiY2hhbmdlKHNjb3BlLCAnbnVtMycpXCI+PC9lbC1pbnB1dD5cbiAgICAgICAgPC9wPlxuICAgICAgPC90ZW1wbGF0ZT5cbiAgICA8L2VsLXRhYmxlLWNvbHVtbj5cbiAgICA8ZWwtdGFibGUtY29sdW1uIGxhYmVsPVwi5oC76YOo566h55CG5oiQ5pysbnVtNFwiPlxuICAgICAgPHRlbXBsYXRlICNkZWZhdWx0PVwic2NvcGVcIj5cbiAgICAgICAgPHAgdi1pZj1cInNjb3BlLnJvdy5jaGlsZHJlblwiPnt7IHNjb3BlLnJvdy5udW00IH19PC9wPlxuICAgICAgICA8cCB2LWVsc2U+XG4gICAgICAgICAgPGVsLWlucHV0IHYtbW9kZWwubnVtYmVyPVwic2NvcGUucm93Lm51bTRcIiBjbGVhcmFibGUgQGlucHV0PVwiY2hhbmdlKHNjb3BlLCAnbnVtNCcpXCI+PC9lbC1pbnB1dD5cbiAgICAgICAgPC9wPlxuICAgICAgPC90ZW1wbGF0ZT5cbiAgICA8L2VsLXRhYmxlLWNvbHVtbj5cbiAgPC9lbC10YWJsZT5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgbGFuZz1cInRzXCIgc2V0dXA+XG5pbXBvcnQgeyByZWFjdGl2ZSB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IGRhdGEgfSBmcm9tIFwiLi9kYXRhLmpzXCI7XG5cbmNvbnN0IGluZGV4TWV0aG9kID0gKGluZGV4OiBudW1iZXIpID0+IHtcbiAgcmV0dXJuIGluZGV4ICsgMVxufVxuXG5jb25zdCBjaGFuZ2UgPSAoc2NvcGU6IGFueSwgZmllbGQ6IHN0cmluZykgPT4ge1xuICBjb25zdCB7IHJvdyB9ID0gc2NvcGVcbiAgY2FsYyhyb3csIGZpZWxkKVxufVxuXG4vLyDpgY3ljobmiYDmnInoioLngrnvvIzlhYjmiorml6flgLzlrZjkuIvmnaVcbi8vIOWunumZheWPqumcgOimgeWtmCBudW3vvIzlm6DkuLogbnVtIOWPmOWMluS4gOWumuS8muW8lei1tyBjb3VudCDlj5jljJZcbmNvbnN0IG9yaWdpblZhbHVlcyA9IChkYXRhID0+IHtcbiAgICBjb25zdCBtYXAgPSB7fSBhcyBhbnk7XG4gICAgY29uc3Qga2V5cyA9IEFycmF5LmZyb20oeyBsZW5ndGg6IDQgfSwgKF8sIGkpID0+IGBudW0ke2kgKyAxfWApO1xuICAgIGNvbnN0IG5vZGVzID0gWy4uLmRhdGEudmFsdWVdIGFzIHsgaWQ6IG51bWJlciwgW2tleTogc3RyaW5nXTogYW55IH1bXTtcbiAgICB3aGlsZSAobm9kZXMubGVuZ3RoKSB7XG4gICAgICAgIGNvbnN0IGl0ID0gbm9kZXMuc2hpZnQoKSE7XG4gICAgICAgIG1hcFtpdC5pZF0gPSBPYmplY3QuZnJvbUVudHJpZXMoa2V5cy5tYXAoa2V5ID0+IFtrZXksIGl0W2tleV1dKSk7XG4gICAgICAgIGlmIChpdC5jaGlsZHJlbj8ubGVuZ3RoKSB7XG4gICAgICAgICAgICBub2Rlcy5wdXNoKC4uLml0LmNoaWxkcmVuKTtcbiAgICAgICAgfVxuICAgIH1cbiAgICByZXR1cm4gbWFwO1xufSkoZGF0YSk7XG5cbi8vIOeOsOWcqOWmguaenOWAvOWSjOWOn+WAvOebuOWQjOS5n+S8muaYr+e6oueahO+8jFxuLy8g6YC76L6R5bqU6K+l5piv77ya5q+U6L6D77yM5aaC5p6c55u45ZCM6L+U5Zue56m65a2X56ym5Liy77yI5LiN5riy5p+T77yJXG4vLyDlpoLmnpzkuI3lkIzov5Tlm57ljp/lgLzvvIjnlLHmqKHmnb/muLLmn5PmiJDnuqLoibLvvIlcbmNvbnN0IGdldERpZmZWYWwgPSAodjogbnVtYmVyLCByb3c6IGFueSwgZmllbGQ6IHN0cmluZykgPT4ge1xuICAgIGNvbnN0IHZhbHVlID0gb3JpZ2luVmFsdWVzW3Jvdy5pZF0/LltmaWVsZF07XG4gICAgcmV0dXJuIHZhbHVlID09PSB2ID8gXCJcIiA6IHZhbHVlO1xufTtcblxuLy8gZmluZCDnmoTnm67nmoTmmK/moLnmja4gSUQg5om+5Yiw6IqC54K577yM5omA5Lul77yM5aaC5p6c5om+5Yiw5LqG6L+U5Zue6K+l6IqC54K577yMXG4vLyDlpoLmnpzmsqHmib7liLDov5Tlm54gdW5kZWZpbmVk77yM5LiN6ZyA6KaB5L2/55So5pWw57uE77yM5Lmf5LiN6ZyA6KaB6L6T5Ye65Y+C5pWwXG5jb25zdCBmaW5kUm93ID0gKGRhdGE6IGFueVtdLCBpZDogbnVtYmVyKSA9PiB7XG4gICAgaWYgKCFBcnJheS5pc0FycmF5KGRhdGEpKSB7IHJldHVybjsgfVxuICAgIGxldCBmb3VuZCA9IGRhdGEuZmluZChpdCA9PiBpdC5pZCA9PT0gaWQpO1xuXG4gICAgaWYgKGZvdW5kKSB7XG4gICAgICAgIHJldHVybiBmb3VuZDtcbiAgICB9XG5cbiAgICBmb3IgKGNvbnN0IGl0IG9mIGRhdGEpIHtcbiAgICAgICAgaWYgKCFpdC5jaGlsZHJlbj8ubGVuZ3RoKSB7IGNvbnRpbnVlOyB9XG4gICAgICAgIGZvdW5kID0gZmluZFJvdyhpdC5jaGlsZHJlbiwgaWQpO1xuICAgICAgICBpZiAoZm91bmQpIHsgcmV0dXJuIGZvdW5kOyB9XG4gICAgfVxuICAgIC8vIHJldHVybiB1bmRlZmluZWQ7XG59O1xuXG4vKipcbiAqIOiuoeeul+afkOS4quiKgueCueeahCBjb3VudOOAgui/memDqOWIhumAu+i+keebuOWvueeLrOeri++8jOWPr+S7peeLrOeri+aIkOWHveaVsOadpeWkhOeQhlxuICogQHBhcmFtIHJvd1xuICovXG5jb25zdCBjYWxjTm9kZSA9IChyb3c6IGFueSkgPT4ge1xuICAgIHJvdy5jb3VudDIgPSByb3cubnVtMSArIHJvdy5udW0yO1xuICAgIHJvdy5jb3VudDMgPSByb3cubnVtMyArIHJvdy5udW00O1xuICAgIHJvdy5jb3VudDEgPSByb3cuY291bnQyICsgcm93LmNvdW50Mztcbn07XG5cbi8qKlxuICog6YCS5b2S5L+u5pS554i26IqC54K555qE5YC8XG4gKiBAcGFyYW0gcm93XG4gKiBAcGFyYW0gZmllbGRcbiAqL1xuY29uc3QgY2FsY1BhcmVudCA9IChyb3c6IGFueSwgZmllbGQ6IHN0cmluZykgPT4ge1xuICAgIGNvbnN0IHsgcGFyZW50SWQgfSA9IHJvdztcbiAgICBjb25zdCBwYXJlbnRSb3cgPSBmaW5kUm93KGRhdGEudmFsdWUsIHBhcmVudElkKTtcbiAgICBpZiAoIXBhcmVudFJvdykgeyByZXR1cm47IH1cblxuICAgIHBhcmVudFJvd1tmaWVsZF0gPSBwYXJlbnRSb3cuY2hpbGRyZW4/LnJlZHVjZSgoczogbnVtYmVyLCBpdDogYW55KSA9PiBzICsgaXRbZmllbGRdLCAwKTtcbiAgICBjYWxjTm9kZShwYXJlbnRSb3cpO1xuICAgIGNhbGNQYXJlbnQocGFyZW50Um93LCBmaWVsZCk7XG59O1xuXG4vLyDlnKggY2FsYyDkuK3miorlpITnkIblvZPliY3oioLngrnlkozlpITnkIbniLboioLngrnnmoTpgLvovpHni6znq4vlvIDmnaVcbmNvbnN0IGNhbGMgPSAocm93OiBhbnksIGZpZWxkOiBzdHJpbmcpID0+IHtcbiAgICBjYWxjTm9kZShyb3cpO1xuICAgIGNhbGNQYXJlbnQocm93LCBmaWVsZCk7XG59O1xuXG5jb25zdCB0YWJsZURhdGEgPSByZWFjdGl2ZShkYXRhKTtcbjwvc2NyaXB0PlxuIiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJkYXRhLmpzIjoiZXhwb3J0IGNvbnN0IGRhdGEgPSB7XG4gIHZhbHVlOiBbXG4gICAge1xuICAgICAgaWQ6IDEsXG4gICAgICB0aXRsZTogJ+WbreWMujEnLFxuICAgICAgY291bnQxOiAyNCxcbiAgICAgIGNvdW50MjogMTIsXG4gICAgICBjb3VudDM6IDEyLFxuICAgICAgbnVtMTogNixcbiAgICAgIG51bTI6IDYsXG4gICAgICBudW0zOiA2LFxuICAgICAgbnVtNDogNixcbiAgICAgIGNoaWxkcmVuOiBbXG4gICAgICAgIHtcbiAgICAgICAgICBpZDogMTEsXG4gICAgICAgICAgcGFyZW50SWQ6IDEsXG4gICAgICAgICAgdGl0bGU6ICfpm4blm6IxJyxcbiAgICAgICAgICBjb3VudDE6IDEyLFxuICAgICAgICAgIGNvdW50MjogNixcbiAgICAgICAgICBjb3VudDM6IDYsXG4gICAgICAgICAgbnVtMTogMyxcbiAgICAgICAgICBudW0yOiAzLFxuICAgICAgICAgIG51bTM6IDMsXG4gICAgICAgICAgbnVtNDogMyxcbiAgICAgICAgICBjaGlsZHJlbjogW1xuICAgICAgICAgICAge1xuICAgICAgICAgICAgICBpZDogMTExLFxuICAgICAgICAgICAgICBwYXJlbnRJZDogMTEsXG4gICAgICAgICAgICAgIHRpdGxlOiAn5YWs5Y+4MTExJyxcbiAgICAgICAgICAgICAgY291bnQxOiA0LFxuICAgICAgICAgICAgICBjb3VudDI6IDIsXG4gICAgICAgICAgICAgIGNvdW50MzogMixcbiAgICAgICAgICAgICAgbnVtMTogMSxcbiAgICAgICAgICAgICAgbnVtMjogMSxcbiAgICAgICAgICAgICAgbnVtMzogMSxcbiAgICAgICAgICAgICAgbnVtNDogMSxcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgICB7XG4gICAgICAgICAgICAgIGlkOiAxMTIsXG4gICAgICAgICAgICAgIHBhcmVudElkOiAxMSxcbiAgICAgICAgICAgICAgdGl0bGU6ICflhazlj7gxMTInLFxuICAgICAgICAgICAgICBjb3VudDE6IDgsXG4gICAgICAgICAgICAgIGNvdW50MjogNCxcbiAgICAgICAgICAgICAgY291bnQzOiA0LFxuICAgICAgICAgICAgICBudW0xOiAyLFxuICAgICAgICAgICAgICBudW0yOiAyLFxuICAgICAgICAgICAgICBudW0zOiAyLFxuICAgICAgICAgICAgICBudW00OiAyLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICBdLFxuICAgICAgICB9LFxuICAgICAgICB7XG4gICAgICAgICAgaWQ6IDEyLFxuICAgICAgICAgIHBhcmVudElkOiAxLFxuICAgICAgICAgIHRpdGxlOiAn6ZuG5ZuiMicsXG4gICAgICAgICAgY291bnQxOiAxMixcbiAgICAgICAgICBjb3VudDI6IDYsXG4gICAgICAgICAgY291bnQzOiA2LFxuICAgICAgICAgIG51bTE6IDMsXG4gICAgICAgICAgbnVtMjogMyxcbiAgICAgICAgICBudW0zOiAzLFxuICAgICAgICAgIG51bTQ6IDMsXG4gICAgICAgICAgY2hpbGRyZW46IFtcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgaWQ6IDEyMSxcbiAgICAgICAgICAgICAgcGFyZW50SWQ6IDEyLFxuICAgICAgICAgICAgICB0aXRsZTogJ+WFrOWPuDEnLFxuICAgICAgICAgICAgICBjb3VudDE6IDQsXG4gICAgICAgICAgICAgIGNvdW50MjogMixcbiAgICAgICAgICAgICAgY291bnQzOiAyLFxuICAgICAgICAgICAgICBudW0xOiAxLFxuICAgICAgICAgICAgICBudW0yOiAxLFxuICAgICAgICAgICAgICBudW0zOiAxLFxuICAgICAgICAgICAgICBudW00OiAxLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgaWQ6IDEyMixcbiAgICAgICAgICAgICAgcGFyZW50SWQ6IDEyLFxuICAgICAgICAgICAgICB0aXRsZTogJ+WFrOWPuDInLFxuICAgICAgICAgICAgICBjb3VudDE6IDgsXG4gICAgICAgICAgICAgIGNvdW50MjogNCxcbiAgICAgICAgICAgICAgY291bnQzOiA0LFxuICAgICAgICAgICAgICBudW0xOiAyLFxuICAgICAgICAgICAgICBudW0yOiAyLFxuICAgICAgICAgICAgICBudW0zOiAyLFxuICAgICAgICAgICAgICBudW00OiAyLFxuICAgICAgICAgICAgfSxcbiAgICAgICAgICBdLFxuICAgICAgICB9LFxuICAgICAgXSxcbiAgICB9LFxuICBdLFxufTsiLCJfbyI6e319