<template>
  <div class="main">
  <!-- 授權(quán)設(shè)備 -->
  <el-dialog title="選擇設(shè)備" :visible.sync="deviceOpen" width="500px">
  <el-table
    ref="multipleTable"
    :data="iotDeviceList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <pagination
      v-show="devicesTotal>0"
      :total="devicesTotal"
      :page.sync="deviceQueryParams.pageIndex"
      :limit.sync="deviceQueryParams.pageSize"
      @pagination="getDevicesList"
  />
  <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitDevicesForm">確 定</el-button>
      <el-button @click="cancelDevicesSet">取 消</el-button>
  </div>
  </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 設(shè)備設(shè)置界面打開(kāi)
        deviceOpen: false,
        devicesTotal: 0,
        deviceQueryParams: {
          pageIndex: 1,
          pageSize: 10
          deviceType: undefined
        },
        iotDeviceList: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀區(qū)金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    methods: {
      // 提交設(shè)備設(shè)置
      submitDevicesForm(){
        var form = {...}
        updateIoDevice(form).then(response => {
          if(response.code === 200){
            // 上方會(huì)顯示成功的消息通知
            this.msgSuccess(response.msg)
            this.deviceOpen = false
            this.deviceLoading = false
            // 此處相當(dāng)于彈窗取消之后，重新刷新頁(yè)面數(shù)據(jù)
            this.getList()
          }else {
            this.msgError(response.msg)
          }
        })
      },
      // 取消設(shè)備設(shè)置
      cancelDevicesSet(){
        this.deviceLoading = false
        this.deviceOpen = false
      },
      // 勾選改變時(shí)觸發(fā)的事件
      handleSelectionChange(selection) {
        // 每次觸發(fā)打印selection信息，總是發(fā)現(xiàn)出現(xiàn)數(shù)組中包含多個(gè)toggle數(shù)據(jù)，所以便再此設(shè)置了過(guò)濾，如果有同學(xué)知道為什么，可以評(píng)論區(qū)留言
        this.multipleSelection = selection.filter((item) => Array.isArray(item) === false).map(obj => obj.id);
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      // 分頁(yè)查詢請(qǐng)求
      getDevicesList(){
        this.deviceLoading = true
        listIotDevice(this.deviceQueryParams).then(response => {
            this.iotDeviceList = response.data.lise
            this.deviceTotal = response.data.count
        })
      }
    }
  }
</script>

...
this.iotDeviceList = response.data.list
this.devicesTotal = response.data.count
// 執(zhí)行回顯操作
this.$nextTick(() => {
    let selectItem = []
    this.iotDeviceList.forEach(item =>{
        if (this.devicesIds){
            this.devicesIds.forEach(id => {
                if (item.id === id){
                    selectItem.push(item)
                }
            })
        }
    })
    // 觸發(fā)勾選項(xiàng)
    this.$refs.multipleTable.toggleRowSelection(selectItem)
})

methods: {
   getRowKeys(row){
       return row.id
   }
}

this.$nextTick(() => {
  ....
})
// 承接上面的代碼，下面是實(shí)際讀取后端數(shù)據(jù)觸發(fā)toggle的操作
this.$nextTick(() => {
      // let selectItem = []
      let remove_ids = []
      this.iotDeviceList.forEach(item =>{
          // 記錄從數(shù)據(jù)庫(kù)獲取的數(shù)據(jù), beforeDevicesIds是之前勾選的設(shè)備id列表
          if (this.beforeDevicesIds){
              this.beforeDevicesIds.forEach(id => {
              if (item.id === id){
                      remove_ids.push(id)
                      this.$refs.multipleTable.toggleRowSelection(item)
                  }
              })
          }
      })
      if (remove_ids.length === 0){
      }else{
          // 過(guò)濾已經(jīng)處理devices ID
          this.beforeDevicesIds = this.beforeDevicesIds.filter(id =>!remove_ids.includes(id))
      }
  }) // 因?yàn)轫?yè)面渲染的異步，所以加一個(gè)延遲刷新數(shù)據(jù)
  this.deviceLoading = false