table 选择

场景：父页面打开子页面弹窗，table在子页面中，勾选table的行后，点击确定把数据带回父页面。要求：table支持翻页，重新打开子页面数据回显、父页面可以删除数据项。

父页面：

this.addLeaseOrderForm.devices = [] // 存储、接收、回显的数据
// open的方法
openAddDevice() {
  this.$refs.addDevices.open(this.addLeaseOrderForm.devices);
},
// 取消某项的方法
cancelAction(row) {
  const result = lodash.filter(this.addLeaseOrderForm.devices, item => {
    return item.sn !== row.sn
  })
  this.addLeaseOrderForm.devices = result
  // 整理数据
  this.formatList()
},

子页面：

<Table
               height="350"
               ref="selectionTable"
               class="add-lease-devices-table"
               @on-select="selectionChoose"
               @on-select-cancel="selectionChangeCancel"
               @on-select-all="selectionAll"
               @on-select-all-cancel="selectionAllCancel"
               :columns="currentColumns"
               :loading.sync="table_loading"
               :data="formatData">
        </Table>


this.saveDevicesList = []
this.pageSize = 10
this.currentPage = 1

  // 打开弹窗 初始化
  open(list) {
    this.saveDevicesList = list
    this.judgeChecked()

    this.pageSize = 10
    this.currentPage = 1
    this.getRecordList(this.pageSize, this.currentPage)
    this.$refs.addDevices.open();
  },
  // 关闭
  close() {
    this.$refs.addDevices.close();
  },      
  // 整理数据
    formatList(list = []) {
      const result = list.map(item => {
        return item
      })
      this.formatData = result
      setTimeout(() => {
        this.judgeChecked()
      }, 0)
    },
      // 判断是否选中
      judgeChecked() {
        const data = JSON.parse(JSON.stringify(this.$refs.selectionTable.objData));
        for (let i in data) {
          this.saveDevicesList.map(checkedItem => {
            if (checkedItem.sn === data[i].sn) {
              data[i]._isChecked = true
            }
          })
        }
        this.$refs.selectionTable.objData = data;
      },      
  // 选择一辆
  selectionChoose(item, row) {
    this.saveDevicesList.push(row)
  },
    // 取消选择一辆
  selectionChangeCancel(item, row) {
    this.saveDevicesList = this.saveDevicesList.filter(item => {
      return row.sn !== item.sn
    })
  },
    // 全选
    selectionAll(selection) {
      // 连接 旧的 和 新的数组
      const tmpAllList = lodash.concat(this.saveDevicesList, selection)
      // 除去重复项，_.isEqual 方法
      const tmpUniq = lodash.uniqWith(tmpAllList, lodash.isEqual)
      this.saveDevicesList = tmpUniq
    },
    // 取消全选
      selectionAllCancel() {
        // 标示被取消的项
        this.saveDevicesList.map(item => {
          this.formatData.map(current => {
            if (item.sn === current.sn) {
              item.unsafe = true
            }
          })
        })
        // 过滤取消项
        const result = this.saveDevicesList.filter(item => {
          return !item.unsafe
        })
        this.saveDevicesList = result
      },
        // 保存当前车辆
        saveDevices() {
          this.$emit('save-devices', this.saveDevicesList)
        }