el-table toggleRowSelection被动触发select/selection-change事件的解决方案

最新推荐文章于 2025-03-23 18:39:37 发布

喝咖啡还是泡茶

最新推荐文章于 2025-03-23 18:39:37 发布

阅读量7.6k

点赞数 11

分类专栏： elementui js vue 文章标签： es6 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_44328764/article/details/121351091

版权

elementui 同时被 3 个专栏收录

16 篇文章

订阅专栏

14 篇文章

订阅专栏

vue

9 篇文章

订阅专栏

在使用el-table组件时，遇到一个场景：需要根据接口返回数据使列表默认选中，但直接调用toggleRowSelection方法会导致非当前页数据被清除。为解决此问题，采取了加锁策略。通过设置rowSelectFlag变量，在handleSelectionChange方法中检查该标志，避免非预期的触发。在setRowSelected方法中，先启用加锁，遍历数据并调用toggleRowSelection，最后解除加锁，确保正确选中所需行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-table toggleRowSelection被动触发selection-change事件的解决方案

场景：接口返回的数据需要列表默认选中，需要调用toggleRowSelection方法，但由于非当前页数据不在数据项内，toggleRowSelection默认触发select事件导致多选数组非当前页数据被干掉

解决方案：加锁

rowSelectFlag: false // 禁止toggleRowSelection默认触发handleSelectionChange

handleSelectionChange(val) {
    if (this.rowSelectFlag) return
    this.multipleList = val
},
        
setRowSelected() {
    setTimeout(() => {
         this.rowSelectFlag = true
         this.dataList.forEach(row => {
            const matchedIndex = this.multipleList .findIndex(item => item.id === row.id)
            this.$refs['modal_table'].toggleRowSelection(row, matchedIndex != -1)
        })
        this.rowSelectFlag = false
    }, 0)
},