本文介绍了在Vue项目中，如何利用Element组件实现通过弹框拆分总任务为多个子任务。在拆分过程中，遇到子任务分配份数超过剩余份数的问题，通过监听input事件并在watch中调整，确保份数分配合理，避免负数出现。文章提供相关HTML和JS代码示例，并分享了解决问题的过程。
在写项目时有一个需求是要对表格中的数据根据状态不同可进行不同的操作，有一种状态就是需要把该行的数据作为一个总任务，通过点击拆分按钮打开弹框的形式来进行自定义拆分成若干个子任务，并且在拆分后可以对每一个子任务进行重新自定义分配份数，同事底部需要显示任务的总份数，以及分配完后还剩余的份数。大概的效果就是这样，样式没去改，请忽略。。。
这里面遇到了一个问题，就是当子任务设置的份数大于剩余份数时，子任务还是设置成功了，剩余份数此时就变成负的了。这显然不是我想要的效果。我需要当给子任务设置份数的时候，一旦设置份数大于剩余份数时，就把剩余的份数全部加给当前设置的子任务，而剩余份数为0。因为我在watch里对整个表单的数据进行了监听，所以就要考虑一个先后的问题，当子任务设置的份数大于剩余份数时，我需要在剩余份数变成负数之前，把剩余份数全部给到当前设置的子任务。想起来Vue中的input事件，测试过input事件会在watch之前触发。测试结果如下：
于是乎，不妨在input事件中先拿到当前设置的子任务的索引，然后在watch中通过判断剩余份数是否小于0，一旦触发小于0这个条件，便把当前设置的子任务份数强行赋值成总分数减去已分配的份数，这
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
