vue+elementUI el-table多选回显

项目中用到了el-table的多选组件，然后有一个功能需求是从后台获取对应数据信息并且要把新增时选中的部分表格数据多选回显出来，具体代码如下：

template部分

1.  
   <el-table :data="response.details" @selection-change="selectionChangeHandle" ref="multipleTable"
2.  
   :row-key="getRowKeys">
3.  
   <el-table-column type="selection" width="55" align="center" :reserve-selection="true"
4.  
   v-if="!isFull" />
5.  
   <el-table-column label="所属项目" width="100" show-overflow-tooltip="" align="center"
6.  
   prop="projectName" />
7.  
   <el-table-column label="班组" width="120" show-overflow-tooltip="" align="center"
8.  
   prop="teamName" />
9.  
   <el-table-column label="务工人员" align="center" prop="userName" />
10.  
    <el-table-column label="是否签订劳动合同" align="center" prop="employment" >
11.  
    <template slot-scope="scope">
12.  
    <dict-tag :options="dict.type.whether_to_sign" :value="scope.row.employment"/>
13.  
    </template>
14.  
    </el-table-column>
15.  
    <el-table-column label="月份" align="center" prop="month" />
16.  
     
17.  
    <el-table-column label="应发工资" align="center" prop="unpaidWages" width="200px"
18.  
    style="text-align: center;">
19.  
    <template slot-scope="scope">
20.  
    <span v-if="isFull">{{scope.row.salaryPayable}}</span>
21.  
    <div v-else class="salaryBox">
22.  
    <el-input style="width:70px" v-model="scope.row.salaryPayable"
23.  
    @blur="updatePayroll(scope.row)"></el-input><span
24.  
    v-if="isDetail">/</span>{{scope.row.remainingAmount}}
25.  
    </div>
26.  
     
27.  
    </template>
28.  
    </el-table-column>
29.  
     
30.  
    </el-table>

 关键部分代码：

在el-table中添加 :row-key="getRowKeys"；在多选框代码部分添加:reserve-selection="true"

js部分代码

1.  
   getRowKeys(row) { //唯一值
2.  
   // console.log(row.id)
3.  
   return row.id;
4.  
   },

1.  
   updateGetSalaryInfo(spId).then((response) => {
2.  
   this.response = response.data;
3.  
   console.log(response.data)
4.  
    
5.  
   //将已选的数据筛选出来在进行选中
6.  
   this.response.details.forEach(val => {
7.  
   console.log(val)
8.  
   if (val.isSelected == 1) {
9.  
   console.log(val.id)
10.  
    console.log(row)
11.  
    // this.$refs.multipleTable.toggleRowSelection(row, true)
12.  
    this.$refs.multipleTable.toggleRowSelection(val, true)
13.  
    }
14.  
    })
15.  
    })

主要代码：this.$refs.multipleTable.toggleRowSelection(val, true)

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