vue2:在异步响应式中确保正确响应的神器 - $nextTick

59 篇文章 ¥19.90 ¥99.00

要实现el-table中行的拖拽,对应到数据层面,就是table所绑定的数组元素的位置变换。实现中在处理完中间部分数据之后,将原数据删除,插入到新位置,如下:

//从this.steps中移除位置为oldIndex的元素,并将其存储在movedItem中
const movedItem = this.steps.splice(oldIndex, 1)[0];
//将这个元素插入到newIndex位置
this.steps.splice(newIndex, 0, movedItem);

这个table有一级子节点,从上到下移动根节点后,总是会把子节点留在上面,没有同步移动:

但是这时候打印出数据来看,this.steps的数据是正确的。所以,DOM没有及时响应更新。

调试过程:

这里做了2步操作,删除原节点和插入到新位置。

删除原节点后,上方红框中的3.1(对于数据2.1)的行应该消失。但是目前看没有消失,所以猜测是删除操作未生效,于是,先把插入到

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值