vue+elementUI el-table多选回显
el-table多选回显
·
项目中用到了el-table的多选组件,然后有一个功能需求是从后台获取对应数据信息并且要把新增时选中的部分表格数据多选回显出来,具体代码如下:
template部分
<el-table :data="response.details" @selection-change="selectionChangeHandle" ref="multipleTable"
:row-key="getRowKeys">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"
v-if="!isFull" />
<el-table-column label="所属项目" width="100" show-overflow-tooltip="" align="center"
prop="projectName" />
<el-table-column label="班组" width="120" show-overflow-tooltip="" align="center"
prop="teamName" />
<el-table-column label="务工人员" align="center" prop="userName" />
<el-table-column label="是否签订劳动合同" align="center" prop="employment" >
<template slot-scope="scope">
<dict-tag :options="dict.type.whether_to_sign" :value="scope.row.employment"/>
</template>
</el-table-column>
<el-table-column label="月份" align="center" prop="month" />
<el-table-column label="应发工资" align="center" prop="unpaidWages" width="200px"
style="text-align: center;">
<template slot-scope="scope">
<span v-if="isFull">{{scope.row.salaryPayable}}</span>
<div v-else class="salaryBox">
<el-input style="width:70px" v-model="scope.row.salaryPayable"
@blur="updatePayroll(scope.row)"></el-input><span
v-if="isDetail">/</span>{{scope.row.remainingAmount}}
</div>
</template>
</el-table-column>
</el-table>
关键部分代码:
在el-table中添加 :row-key="getRowKeys";在多选框代码部分添加:reserve-selection="true"
js部分代码
getRowKeys(row) { //唯一值
// console.log(row.id)
return row.id;
},
updateGetSalaryInfo(spId).then((response) => {
this.response = response.data;
console.log(response.data)
//将已选的数据筛选出来在进行选中
this.response.details.forEach(val => {
console.log(val)
if (val.isSelected == 1) {
console.log(val.id)
console.log(row)
// this.$refs.multipleTable.toggleRowSelection(row, true)
this.$refs.multipleTable.toggleRowSelection(val, true)
}
})
})
主要代码:this.$refs.multipleTable.toggleRowSelection(val, true)
更多推荐
已为社区贡献1条内容
所有评论(0)