60.实现elementUI表格点击某一行选中勾选框

最新推荐文章于 2024-07-23 14:53:44 发布

我在在啦我让让啦

最新推荐文章于 2024-07-23 14:53:44 发布

阅读量5.4k

点赞数 11

分类专栏： Vue JavaScript 文章标签：前端

本文链接：https://blog.csdn.net/annexiaobin/article/details/119822183

版权

Vue 同时被 2 个专栏收录

56 篇文章 6 订阅

订阅专栏

JavaScript

22 篇文章 1 订阅

订阅专栏

前言：

项目中需要做到除了勾选表格第一列勾选框去选中数据外，还要通过点击某一行任何地方，都可以勾选到这条数据，并且要做到选中的数据不能重复，记录一下：

（全选和选中勾选框的方法就不写了这里只写通过点击行选中勾选框）

1.首先给<el-table>添加 ref='multipleTable' 和 @row-click="handleClickTableRow"

<el-table 
    ...... 
    ref="multipleTable" 
    @row-click="handleClickTableRow">
    ......
</el-table>

2.在handleClickTableRow方法里，通过判断结果数组里是否存在这条数据而决定是否添加进去

// 点击行勾选数据
handleClickTableRow(row,event,column){
    // checkNum和isCheck是批量操作按钮和已选几条展示的依据
    this.checkNum = 0
    this.isCheck = false
    // 如果status为无效不让勾选
    if(row.status == '0'){
        return
    }else{
        // 选中这行数据 勾选框会勾选上
        this.$refs.multipleTable.toggleRowSelection(row)
        if(this.batchDeleteArr.length > 0){
            // 如果结果数组不为空，判断所选的这条是否在结果数组里
            if(JSON.stringify(this.batchDeleteArr).indexOf(JSON.stringify(row)) == -1){
                this.batchDeleteArr.push(row)
            }else{
                // 所选数据在结果数组里，那就要清除掉它，不然会造成数据重复
                this.batchDeleteArr.map((item,index) =>{
                    if(item.id == row.id){
                        this.batchDeleteArr.splice(index,1)
                    }
                })
            }
        }else{
            this.batchDeleteArr.push(row)
        }
    }
    // 这里几行代码是根据结果数组是否有值判断批量操作按钮和已选几条展示是否需要解除置灰和展示
    if(this.batchDeleteArr.length > 0){
        this.checkNum = this.batchDeleteArr.length
        this.isCheck = true
    }else{
        this.isCheck = false
    }
}

3.又发现一个问题，就是在全选后取消全选，之后再通过点击行，就不能勾选上数据了，解决方法就是：

（1）data里设置allCheck:false,

（2）在全选方法里设置 this.allCheck = true

（3）在上边的点击行勾选数据方法里，在this.$refs.multipleTable.toggleRowSelection(row) 这行代码前，添加判断，通过判断allCheck是否为true，从而设置结果数组为空：

if(this.allCheck == true){
    this.batchDeleteArr = []
    this.allCheck = false
}

4.按照第3条更改之后，发现，全选后取消全选，之后通过点击行，是能勾选上数据，但是，这样一来，全选后，不取消全选的情况，如果点击行，就没办法取消勾选了，经过一系列操作后，有了以下解决方法：

（1）取消第3条添加的代码

（2）在handleClickTableRow方法里，更改代码如下：

// 点击行勾选数据
handleClickTableRow(row,event,column){
    // checkNum和isCheck是批量操作按钮和已选几条展示的依据
    this.checkNum = 0
    this.isCheck = false
    // 如果status为无效不让勾选
    if(row.status == '0'){
        return
    }else{
        if(this.batchDeleteArr.length > 0){
            // 如果结果数组不为空，判断所选的这条是否在结果数组里
            if(JSON.stringify(this.batchDeleteArr).indexOf(JSON.stringify(row)) == -1){
                this.batchDeleteArr.push(row)
                this.$refs.multipleTable.toggleRowSelection(row,true)
            }else{
                // 所选数据在结果数组里，那就要清除掉它，不然会造成数据重复
                this.batchDeleteArr.map((item,index) =>{
                    if(item.id == row.id){
                        this.batchDeleteArr.splice(index,1)
                        this.$refs.multipleTable.toggleRowSelection(row,false)
                    }
                })
            }
        }else{
            this.batchDeleteArr.push(row)
            this.$refs.multipleTable.toggleRowSelection(row,true)
        }
    }
    // 这里几行代码是根据结果数组是否有值判断批量操作按钮和已选几条展示是否需要解除置灰和展示
    if(this.batchDeleteArr.length > 0){
        this.checkNum = this.batchDeleteArr.length
        this.isCheck = true
    }else{
        this.isCheck = false
    }
}

5.还有一点需要改的就是，点击操作列，也会勾选上数据，这显然是不对的，需要在判断status是否为0之前先判断event.label是否等于“操作”，如果等于“操作”，就return。

在handleClickTableRow方法里，更改代码如下：

// 点击行勾选数据
handleClickTableRow(row,event,column){
    // checkNum和isCheck是批量操作按钮和已选几条展示的依据
    this.checkNum = 0
    this.isCheck = false
    if(event.label == '操作'){
        return
    }else{
        // 如果status为无效不让勾选
        if(row.status == '0'){
            return
        }else{
            if(this.batchDeleteArr.length > 0){
                // 如果结果数组不为空，判断所选的这条是否在结果数组里
                if(JSON.stringify(this.batchDeleteArr)
                 .indexOf(JSON.stringify(row)) == -1){
                    this.batchDeleteArr.push(row)
                    this.$refs.multipleTable.toggleRowSelection(row,true)
                }else{
                    // 所选数据在结果数组里，那就要清除掉它，不然会造成数据重复
                    this.batchDeleteArr.map((item,index) =>{
                        if(item.id == row.id){
                            this.batchDeleteArr.splice(index,1)
                            this.$refs.multipleTable.toggleRowSelection(row,false)
                        }
                    })
                }
            }else{
                this.batchDeleteArr.push(row)
                this.$refs.multipleTable.toggleRowSelection(row,true)
            }
        }
    }
    // 这里几行代码是根据结果数组是否有值判断批量操作按钮和已选几条展示是否需要解除置灰和展示
    if(this.batchDeleteArr.length > 0){
        this.checkNum = this.batchDeleteArr.length
        this.isCheck = true
    }else{
        this.isCheck = false
    }
}