vue+element ui，根据后台返回的数据勾选表格

<template>
  <div style="width:800px;padding:100px">
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="name"
      label="名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="id"
      label="id"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <el-button @click="set">获取</el-button>
  </div>
</template>

export default {
    data(){
        return{
        multipleSelection: [],
        tableData:[],
        roleList:[],
      }
    },
    mounted(){
     this.loadData()
    },
    methods:{
      loadData(){
         allRoles({pageSize:100,pageNum:1}).then(res=>{
            this.tableData=res.result.content
         })
          queryRole({staffId:"mst506808860468715520"}).then(res=>{ 
             this.roleList=res.result
             for(var i=0;i<this.roleList.length;i++){
                for(var j=0;j<this.tableData.length;j++){
                  if(this.tableData[j].id === this.roleList[i].id){
                    this.$refs.multipleTable.toggleRowSelection(this.tableData[j],true)
                   }
                }   
             }
           }).catch(err=>{})
        },
        handleSelectionChange(val){
            this.multipleSelection = val
            let ids=[]
            this.multipleSelection.map((item)=>{
              ids.push(item.id)
            })
            console.log(ids)
        }
    }
}