el-table 表格获取已选数据回显的问题

这次的需求数据是返回在详情里面,但是数据源是另外请求一个接口获取列表
如果数据只是返回在列表接口回显直接

this.$refs.table.toggleRowSelection(数据);

就可以了.
数据来源自不同地方还要回显多数据勾选的时候情况就不一样了

首先我对比了一下列表和详情的数据结构,发现结构不一样,
把两个数据直接写死.

// 获取数据时世界把数据写死
let arr = [
  {serviceAptitudeId:7,serviceAptitudeName:'核酸检测资质'},
  {serviceAptitudeId:9,serviceAptitudeName:'二级服务资质'}
]
this.tableData = arr

//详情接口拿到的数据也写死 这边暂且为form的list
this.form.list = [
  {serviceAptitudeId:7,serviceAptitudeName:'核酸检测资质'},
  {serviceAptitudeId:9,serviceAptitudeName:'二级服务资质'}
]
this.toggleSelectionTwo(this.form.list) //调取回显的接口

// 获取到详情的数据直接传过来进行toggleRowSelection回显
toggleSelection(rows) {
   console.log(rows)
   if (rows) {
     rows.forEach(row => {
       this.$refs.table.toggleRowSelection(row);
     });
   } else {
     this.$refs.table.clearSelection();
   }
 },

打印的时候发现rows有数据,并且跟列表数据一模一样,列表没有勾选,但是勾选列表的时候,
@selection-change打印的数据有传进去勾选的2个数据和我再勾选的数据,数据重复了.
测试加了row-key也无法显示出来,后来解决办法

getArr(){
      let m = this
      let arr = []
      if(m.form.sysEngineerServices && m.form.sysEngineerServices.length>0){
      	//循环列表数据
        for(let i =0;i<m.tableData.length;i  ){ 
          //再循环详情获取到的数据
          for(let k = 0;k<m.form.list.length;k  ){
            if(m.tableData[i].serviceAptitudeId == m.form.list[k].serviceAptitudeId){
              //把和详情数据一样的数据push进去,前提是我获取到数据格式已经处理成一样的格式了
              arr.push(m.tableData[i])
            }
            if(i == m.tableData.length-1){
              // 把tableData的数据再return回去用toggleSelection方法处理
              return arr
            }
          }
        }
      }
    },

就回显成功了…
数据明明是一模一样的…一定要用列表原数据进行push…再this.$refs.table.toggleRowSelection(row)进行处理.
记录一下这个坑

这篇好文章是转载于：学新通技术网