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

?

1 2 3 4 5 6 7 8 9

getRowKeys(row){ //唯一值，一般都是id             return row.id;         },   handleSelectionChange(val){ //只要复选框勾选了，就会打印               console.info( val )           },

　　

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

?

1 2 3

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

　　

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

?

1	<strong>row-key 方法获取 table 数据回显，可以用于树形结构的回显</strong><br><br><br>

?

1 2 3 4 5 6 7

getLockDeptList(){               this.$refs. 这里是你上面table 绑定的 table .toggleRowSelection( item ,true)//这样就可以了           },   // item 是你数据要勾选上的数据，例如： this.tableData1[i]

　　

?

1	来自官方的骚操作，也是官方留下的坑<br><br>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

//解决上方回显会勾上一些本身就不会被勾的数据回显问题   //数据源解析：   // 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);                             }                           }                                               })

　　

?

1

<br><br>