js树结构所有叶子节点的值相加等于父节点的值(2)?

作者站长头像
站长
· 阅读数 5

这是默认情况js树结构所有叶子节点的值相加等于父节点的值(2)?

麻烦根据我标的序号看下图,很重要js树结构所有叶子节点的值相加等于父节点的值(2)?

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

=====

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

js树结构所有叶子节点的值相加等于父节点的值(2)?

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

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

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

======

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


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

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

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

回复
1个回答
avatar
test
2024-07-09

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
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容