el-table多选框选中数据回显
1.vue部分主要是这两处地方需要加上::row-key="(row) => { return row.id }" 以及 :reserve-selection="true"<el-tableref="multipleTable":data="nodeList"style="width: 100%"borderheight="400":row-key="(row) => { ret
·
1.vue部分主要是这两处地方需要加上::row-key="(row) => { return row.id }"
以及 :reserve-selection="true"
<el-table
ref="multipleTable"
:data="nodeList"
style="width: 100%"
border
height="400"
:row-key="(row) => { return row.id }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" :reserve-selection="true" width="55" align="center" />
<el-table-column label="Number" type="index" width="100" align="center" />
<el-table-column label="IP Address" align="center" prop="ip" />
<el-table-column label="Region" align="center" prop="region" :formatter="regionFormat" />
<el-table-column label="Country" align="center" prop="country" />
</el-table>
2.script部分在接口返回的数据中加上这句:
this.selectIdList.map(row => {
this.$refs.multipleTable.toggleRowSelection(row, true)
})
但是注意,如果表格在好几个tab页下面,或者在任何循环下,打印this.$refs.multipleTable就会发现这是个数组,这时,就无法像上面那样回显,需要进行for循环:
row.selectIdList.map(item => {
this.$nextTick(() => {
for (let i = 0; i < this.$refs.multipleTable.length; i++) {
this.$refs.multipleTable[i].toggleRowSelection(item, true);
}
});
});
想要清空选择如下:
this.$nextTick(() => {
for (let i = 0; i < this.$refs.multipleTable.length; i++) {
this.$refs.multipleTable[i].clearSelection();
}
})
更多推荐
已为社区贡献4条内容
所有评论(0)