<template> <div> <el-table ref="multipleTable" :data="links" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="roomNo" label="房间" width="180"> </el-table-column> <el-table-column prop="isCheckOut" label="是否已离店"> <template slot-scope="scope"> <span>{{scope.row.isCheckOut?'是':'否'}}</span> </template> </el-table-column> </el-table> </div> </template> <script> export default { name: '', props: ['echoLinksCheckedList'], data() { return { multipleSelection: [], linksCheckedList: [], links: [] } }, methods: { close() { this.$emit('componentCallBack', false, 'cancel') }, success() { this.$emit('componentCallBack', false, 'success', this.linksCheckedList) }, handleSelectionChange(val) { this.multipleSelection = val }, async getLinks() { let obj = {} let res = await this.axios.post('/getLinks', obj) this.links = res.data.filter(item => { return item.registerID != this.registerID }) // 回显多选信息 this.$nextTick(() => { this.links.forEach((item) => { this.echoLinksCheckedList.forEach(subItem => { if (item.registerID == subItem) { this.$refs.multipleTable.toggleRowSelection(item) } }) }) }) }, }, mounted() { this.getLinks() } } </script>
关键点:因为table的数据加载和checkbox回显是一起处理的,此时checkbox回显要放到nextTick
中处理