<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中处理
