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

作者 铁血 汉子 2021年12月8日
2024/12/03/05:20:16pm 2021/12/8/9:13:37
0 1227