el-table復選改為單選問題 ( @selection-change獲取的數據不止當前數據 )

關於el-table復選改單選的方法網上挺多的, 就不再贅述了, 貼一個相關方法的鏈接: 

https://blog.csdn.net/mqq_12/article/details/105817330

 

根據這個鏈接中的方法寫完之后發現 @selection-change 事件中獲取的數據不只是當前選中的, 還有上次選中數據

分別在 @select 和 @selection-change 里面把數據打印出來看一下

// @select 事件方法
singleSelect (selection, row) {
        console.log('觸發清空事件');
        this.$refs.authTable.clearSelection()
        console.log('清空事件完成');
        if (selection.length === 0) return
        console.log('觸發選中事件');
        this.$refs.authTable.toggleRowSelection(row, true)
        console.log('選中事件完成');
    }

// @selection-change 事件方法
selGroup (val) {
      console.log('選中的數據--------', val);

}

打印如下:

 

 

 

分析一下, 多選框再次點擊的時候是會觸發一次 @selection-change 事件的( 此時數據為2條 ), 但是不知道是事件優先級還是阻塞的問題, 這一次事件被放在 @select 后面去執行了, 也就是先執行完了 @select 事件 中的清空( 

this.$refs.authTable.clearSelection())方法,然后又執行了 this.$refs.authTable.toggleRowSelection(row, true) 方法把當前點擊的數據選中

這個時候重點來了----之前阻塞的 @selection-change 事件執行了, 所以上面打印出來的數據就可以看出來, 最后獲取到的數據是兩條.

 

解決辦法: 

// 改為異步執行
async singleSelect (selection, row) {
        console.log('觸發清空事件');
        await this.$refs.authTable.clearSelection()
        console.log('清空事件完成');
        if (selection.length === 0) return
        console.log('觸發選中事件');
        this.$refs.authTable.toggleRowSelection(row, true)
        console.log('選中事件完成');
    }

 

改為異步執行后打印數據為: 

 

 上面所說的被阻塞的事件在清空數據之后緊跟着執行了,  this.$refs.authTable.toggleRowSelection(row, true) 成了最后執行的方法, 這樣獲取到的數據就是正常的了.

至於為什么改為異步之后阻塞的方法會提前執行我也搞不清楚.

按我的理解, 點擊其他復選框的時候應該先執行 @selection-change 事件, 然后 @select 里面清空數據, 再將最后一次點擊的數據選中, 也就是這個樣子

 

 

以上僅為個人分析, 文筆不好, 技術也菜, 如果有什么說的不對的地方還望大家多多指正~