專案里有個表格，用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)
}
}
這個確實有用，但是強制重繪整個表格的辦法不那么優雅，一是表格部分會閃爍一下，二是這其實是把問題繞過去了。有沒有更好的辦法呢？
uj5u.com熱心網友回復：
iview表格？轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/28842.html
標籤：JavaScript
上一篇：請問一下，為什么我在dw里設定的尺寸到網頁里會變大，比如我設定了寬度1600px，高度128px。結果顯示尺寸是不對的。請問這是為什么(>ω<)是我代碼寫錯了嗎
下一篇：應用小白請教