vue el-table 表格数据复选框回显


getRowKeys(row){ //唯一值,一般都是id
            return row.id;
        },

handleSelectionChange(val){ //只要复选框勾选了,就会打印

            console.info( val )

        },

  

首先是 el-table 要绑定的东西

<el-table :row-key="getRowKeys"  ref="tableData1" :data="tableData1"  @selection-change="handleSelectionChange">
                    
</el-table>

  

注意: ref 和 data 一定要绑定在同一个数组,保证数据的回显。 

row-key 方法获取 table 数据回显,可以用于树形结构的回显


getLockDeptList(){

            this.$refs. 这里是你上面table 绑定的 table .toggleRowSelection( item ,true)//这样就可以了

        },

// item 是你数据要勾选上的数据,例如: this.tableData1[i] 

  

来自官方的骚操作,也是官方留下的坑

//解决上方回显会勾上一些本身就不会被勾的数据回显问题

//数据源解析: 

// this.studentTable 是你 el-table 绑定的 table 
//  this.userInfoList 是你从后台请求回来要回显的数据

//特别注意: 一定要加一个 else ,不加else 会显示上一些本身就没有的数据


this.$nextTick(() => {
                        for( var j in this.studentTable ){

                            if( this.userInfoList.indexOf( this.studentTable[i].deptId ) != -1 ){
                                this.$refs.studentTable.toggleRowSelection(this.studentTable[i],true);
                            }else{
                                this.$refs.studentTable.toggleRowSelection(this.studentTable[i],false);
                            }

                        }
                        
                    })

  



 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM