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);
                            }

                        }
                        
                    })

　　

// this.typeTableContenList 这里跟上面的 table 的 ref 绑定是一样的
const selectedProducts = this.typeTableContenList.filter(item => selectedIds.includes(item.id))
// 直接通过 foreach 去赋值
        selectedProducts.forEach(product => {
          this.$refs.typeTableContenList.toggleRowSelection(product, true)
        })

 

PS：回显的时候要和表格的数据一样。不然就会导致有BUG，回显不上去