在ivew的form中取消勾选checkbox时删除行的问题

movingboy2 2020-07-14 07:46:29
项目里有个表格,用iview做的,这个表格第1列是一个checkbox。我们想实现一个功能:用户取消勾选一条记录的checkbox,程序自动删除这一行。这个实现比较简单,但有个问题是下一行原本是已勾选,当前行被删除后下一行的位置上移,然后会显示为未勾选的。代码如下:

<input type='checkbox' v-model='item.isChecked' @change='switchBillSelected(item)'></input>

switchBillSelected(item) {
if (!item.isChecked) {
for (let i=0; i<this.bills.length; i++) {
if (this.bills[i].id == item.id) {
this.bills.splice(i, 1)
break;
}
}
}
}


为了解决这个问题,我把上面的代码改了一下,重新绑定数据,强制刷新下表格:

<input type='checkbox' v-model='item.isChecked' @change='switchBillSelected(item)'></input>

switchBillSelected(item) {
if (!item.isChecked) {
for (let i=0; i<this.bills.length; i++) {
if (this.bills[i].id == item.id) {
this.bills.splice(i, 1)
break;
}
}

// Keep an alias of this.bills
let alias = this.bills;

// Re-bind this.bills to refresh the check status of visible rows
this.bills = [];
setTimeout((bills) => {
this.bills= bills;
}, 500, alias)
}
}


这个确实有用,但是强制刷新整个表格的办法不那么优雅,一是表格部分会闪烁一下,二是这其实是把问题绕过去了。有没有更好的办法呢?
...全文
366 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
jio可 2020-07-14
  • 打赏
  • 举报
回复
iview表格?

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧