切换el-table中的el-select 点击添加将该行新增到新的表格中

一、先上效果图

二、具体需求实现

1、切换下拉框 展开折叠框并显示二维码等相关信息 弹框布局
注意： 这里会遇到一个问题 第一次切换下拉框 expand不展开
解决： 加上唯一标识就能解决该问题 row-key=“subId”

  
    
    
      
        二维码列表
      
      
        
          
        
        
        
        
          
        
        
          
        
      
    
    
    
      

    
    
    
      
        下载区
      
      
        
        
        
        
          
        
      
    
  
  

    取消
    清空
    批量下载
  

2、切换二维码版次
重点：展开行 this.$refs.refTable.toggleRowExpansion(row, true)

// 切换二维码版次
changeVersion(row) {
  const params = {
    projCode: row.projCode,
    subCode: row.subCode,
    version: row.version
  }
  queryAcQrcode(params).then(response => {
    // 展开行
    this.$refs.refTable.toggleRowExpansion(row, true)
    this.$set(row, 'imgQrcode', response.imgQrcode)
    if (response.isLogin) {
      // 控制台数据更新 页面视图未更新 需使用 this.$set()赋值
      this.$set(row, 'isLogin', '内部访问')
    } else {
      this.$set(row, 'isLogin', '公开访问')
    }
    this.$set(row, 'expireTimeStr', response.expireTimeStr)
  })
},

3、下拉框有值时 点击操作列 + 将当前行内容添加到右边下载区

// 添加
add(row) {
  // 解决办法如下
  this.tableDownloadData.push(JSON.parse(JSON.stringify(row)))
}

注意：这里会遇到一个问题 切换左侧下拉框的值 添加到右侧数组里的值也会更新
原因是：对象是引用类型 传递的是引用地址 所以你两个数组引用的是同一个对象 只要其中一个数组改变 就会导致对象改变 进而另一个引用的数组也会改 解决办法如上

4、下载区数组去重

// 添加
add(row) {
  // 去重
  const obj = {}
  this.tableDownloadData = this.tableDownloadData.reduce((curr, next) => {
    /* 判断对象中是否已经有该属性  没有的话 push 到 curr数组*/
    obj[next.subCode + next.version] ? '' : obj[next.subCode + next.version] = curr.push(next)
    return curr
  }, [])
}

5、点击下载区操作列 x 删除该行

// 删除
handleDelete(index) {
   this.tableDownloadData.splice(index, 1)
 }

6、点击取消 关闭所有折叠

cancelHistory() {
  this.openHistory = false
  // 收起所有展开
  this.tableQRCodeData.forEach(row => {
    this.$refs.refTable.toggleRowExpansion(row, false) // 全部折叠
  })
}