el-table在弹窗中的使用示例详解

<template>
  <div class="main">
  <!-- 授权设备 -->
  <el-dialog title="选择设备" :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 {
        // 设备设置界面打开
        deviceOpen: false,
        devicesTotal: 0,
        deviceQueryParams: {
          pageIndex: 1,
          pageSize: 10
          deviceType: undefined
        },
        iotDeviceList: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },
    methods: {
      // 提交设备设置
      submitDevicesForm(){
        var form = {...}
        updateIoDevice(form).then(response => {
          if(response.code === 200){
            // 上方会显示成功的消息通知
            this.msgSuccess(response.msg)
            this.deviceOpen = false
            this.deviceLoading = false
            // 此处相当于弹窗取消之后，重新刷新页面数据
            this.getList()
          }else {
            this.msgError(response.msg)
          }
        })
      },
      // 取消设备设置
      cancelDevicesSet(){
        this.deviceLoading = false
        this.deviceOpen = false
      },
      // 勾选改变时触发的事件
      handleSelectionChange(selection) {
        // 每次触发打印selection信息，总是发现出现数组中包含多个toggle数据，所以便再此设置了过滤，如果有同学知道为什么，可以评论区留言
        this.multipleSelection = selection.filter((item) => Array.isArray(item) === false).map(obj => obj.id);
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      // 分页查询请求
      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
// 执行回显操作
this.$nextTick(() => {
    let selectItem = []
    this.iotDeviceList.forEach(item =>{
        if (this.devicesIds){
            this.devicesIds.forEach(id => {
                if (item.id === id){
                    selectItem.push(item)
                }
            })
        }
    })
    // 触发勾选项
    this.$refs.multipleTable.toggleRowSelection(selectItem)
})

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

this.$nextTick(() => {
  ....
})
// 承接上面的代码，下面是实际读取后端数据触发toggle的操作
this.$nextTick(() => {
      // let selectItem = []
      let remove_ids = []
      this.iotDeviceList.forEach(item =>{
          // 记录从数据库获取的数据, beforeDevicesIds是之前勾选的设备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{
          // 过滤已经处理devices ID
          this.beforeDevicesIds = this.beforeDevicesIds.filter(id =>!remove_ids.includes(id))
      }
  }) // 因为页面渲染的异步，所以加一个延迟刷新数据
  this.deviceLoading = false