ElementUI的表格设置勾选toggleRowSelection

文章目录


一、介绍

js 复制代码
//1、row:表格的行数据,选中/取消选中哪行,就是哪行的数据
    //注意:row只能是表格的data属性指定的数组中的数据,放其它数组中数据是无效的
//2、selected:true-选中;false-取消选中
this.$refs.table.toggleRowSelection(row, selected)
  • 该API一般在页面加载完成之后再调用
  • 该API会触发表格的selection-change事件,注意勾选数据的影响

二、示例

1、使用

html 复制代码
<el-table ref="table" :data="tableData" @selection-change="handleSelectionChange">
</el-table>
js 复制代码
data(){
    return{
        tableData: [],
        //选中的数据
        selectionTableData: []
    }
},
methods:{
    //表格选择项发生变化事件
    handleSelectionChange(selection){
        this.selectionTableData=selection
    },
    //表单修改
    handleUpdate(){
        getDetail().then(res=>{
            //表格数据赋值
            this.tableData=res.data.tableData
            //表格选中数据赋值
            this.selectionTableData=res.data.selectionTableData
            
            this.$nextTick(() => {
                //设置表格勾选
                //错误示例:使用非data属性指定的数组中的数据设置勾选
                this.selectionTableData.forEach((item,index,arr)=>{
                    this.$refs.table.toggleRowSelection(item, true)
                })
                
                //错误示例:由于toggleRowSelection方法会触发selection-change事件,直接使用this.selectionTableData循环,只要勾选一次,就会把this.selectionTableData=勾选的那一行数据,改变了要勾选的数据
                this.tableData.forEach((dataItem,dataIndex,dataArr)=>{
                    this.selectionTableData.forEach((item,index,arr)=>{
                       if(JSON.stringify(dataItem)===JSON.stringify(item)){
                           this.$refs.table.toggleRowSelection(dataItem, true)
                       } 
                    })
                })
                
                //正确示例
                //选中表格数据的数组要赋值1个创建的新数组
                const selectionArr=this.selectionTableData
                this.tableData.forEach((dataItem,dataIndex,dataArr)=>{
                    this.selectionArr.forEach((item,index,arr)=>{
                       if(JSON.stringify(dataItem)===JSON.stringify(item)){
                          //放入API的row是表格data属性指定数组中的数据
                          this.$refs.table.toggleRowSelection(dataItem, true)
                       } 
                    })
                })
                
                
            })    
        })
    }
}

2、分页切换的勾选消失

  • 切换下一页时,页面刷新tableData发生变化,在返回上一页,勾选的数据checkbox的check属性已经被重置为false,所以不会回显之前勾选的行
html 复制代码
<el-table ref="table" :data="tableData" @selection-change="handleSelectionChange">
</el-table>
js 复制代码
data(){
    return{
        loading: true,
        total: 0,
        //表格数据
        tableData: [],
        //当前页勾选行数据
        currCheckData:[],
        //总勾选数据
        totalCheckData:[]
    }
},
methods:{
    //将本页勾选的行数据添加到总勾选数据里面
    addCurrPageData(){
        if(this.currCheckData.length!==0){
            this.totalCheckData=this.totalCheckData.concat(this.currCheckData)
            //添加进去之后清空本页勾选行数据
            this.currCheckData=[]
        }
    },
    //切换页会重新调用list  
    getList() {
        this.loading=true
        //切换页时,保存本页勾选行数据
        this.addCurrPageData()
        
        //请求后台下一页数据
        listQuestion(this.queryParams).then(res=>{
            this.tableData=res.rows
            this.total=res.total
            //本页之前可能勾选过,设置本页勾选行
            this.$nextTick(()=>{
                this.tableData.forEach((dataItem,dataIndex,dataArr)=>{
                    this.totalCheckData.forEach((item,index,arr)=>{
                        if(dataItem.qustId===item.qustId){
                            //不需要装填本页之前勾选行数据,因为toggleRowSelection会触发表格的selection-change事件
                            //this.currCheckData.push(dataItem)
                            
                            //设置勾选状态
                            this.$refs.table.toggleRowSelection(dataItem,true)
        
                            //总勾选行中删除本页勾选行
                            this.totalCheckData.splice(index,1)
                        }
                    })
                })
            })
            this.loading=false
        })
    },
    //表格勾选状态改变事件
    handleSelectionChange(selection){
        this.currCheckData=selection
    },
    //确定按钮
    checkQust(){
        //确定时,保存一次当前页勾选行
        this.addCurrPageData()
    }
}
相关推荐
狗头大军之江苏分军13 分钟前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding13 分钟前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
刘婉晴23 分钟前
【Java】NIO 简单介绍
java·nio
文心快码BaiduComate26 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger26 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98132 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐39 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
渣哥41 分钟前
聊聊我和 ArrayList、LinkedList、Vector 的“一地鸡毛”
java
浮游本尊44 分钟前
Java学习第20天 - 性能优化与监控
java