html部分需要注意 在标间内加入:row-key="getRowKeys"属性绑定唯一属性id,以及在勾选框一栏添加:reserve-selection="true"属性
<el-table
style="width: 100%"
border
:data="channelList"
:row-key="getRowKeys"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
ref="multipleTable"
>
<el-table-column
type="selection"
:reserve-selection="true"
width="30"
align="center"
></el-table-column>
<el-table-column
prop="arFactoryName"
label="厂"
align="center"
></el-table-column>
<el-table-column
prop="arEquipmentName"
label="摄像机名称"
align="center"
></el-table-column>
<el-table-column
prop="arChannelName"
label="通道名称"
align="center"
></el-table-column>
</el-table>
需要注意的是:
1、你的需要回显的id数据不能比列表数据先获取到,因为你toggleAllSelection的时候,列表还没渲染,你应该把这个放在列表渲染后。
2、拿到列表数据后,根据pagebingAgentdata检索列表项中存在的数据,这可以使用id去匹配,找到后使用toggleRowSelection进行勾选。
以下是script部分
1、设置回显数据id:
this.selectedList = result.patrolPlanChannelViews;
let rowids = this.selectedList.map((item) => item.arChannelCode);
this.channelList.forEach((item) => {
if (rowids.includes(item.arChannelCode)) {
this.$nextTick(() => {
this.$refs.multipleTable.toggleRowSelection(item);
});
}
});
2、回显数据设置唯一id:
getRowKeys(row) {
return row.arChannelCode;
},
3、回显表单数据
// 表单数据回显,result为详情接口数据
for (let k in result) {
if (typeof result[k] !== undefined) {
this.form[k] = result[k];
}
}
// 避免重复提交数据
this.form.patrolPlanChannelViews = [];