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

一、先上效果图

二、具体需求实现

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

<!-- 历史分享弹框 -->
<el-dialog title="历史分享" :visible.sync="openHistory" width="1600px" append-to-body :destroy-on-close="false" :close-on-click-modal="false">
  <el-row>
    <!-- 二维码列表 -->
    <el-col :span="11">
      <el-row>
        <el-col :span="24">二维码列表</el-col>
      </el-row>
      <el-table ref="refTable" row-key="subId" height="700" :data="tableQRCodeData">
        <el-table-column type="expand">
          <template slot-scope="props">
            <div class="demo-table-expand">
              <img v-if="props.row.imgQrcode" :src="props.row.imgQrcode" style="width: 100%;height: 85%;">
              <div v-if="props.row.isLogin" class="history-select">{{ props.row.isLogin }}</div>
              <div v-if="props.row.expireTimeStr" class="history-select">有效期至:{{ props.row.expireTimeStr }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="子项号" prop="subCode" />
        <el-table-column label="子项名" prop="subName" />
        <el-table-column label="二维码版次">
          <template slot-scope="scope">
            <el-select v-model="scope.row.version" @change="changeVersion(scope.row)">
              <el-option v-for="(item,index) in scope.row.versionList" :key="index" :label="item" :value="item" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template v-if="scope.row.version!=undefined" slot-scope="scope">
            <i class="el-icon-plus" style="cursor: pointer;" @click="add(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <!-- 分割线 -->
    <el-col :span="2">
      <div class="dividingLine" />
    </el-col>
    <!-- 下载区 -->
    <el-col :span="11">
      <el-row>
        <el-col :span="24">下载区</el-col>
      </el-row>
      <el-table height="700" :data="tableDownloadData" :row-style="{height:'49px'}">
        <el-table-column label="子项号" align="center" prop="subCode" />
        <el-table-column label="子项名" prop="subName" />
        <el-table-column label="二维码版次" prop="version" />
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <i class="el-icon-close" style="cursor: pointer;" @click="handleDelete(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <div slot="footer" class="dialog-footer">
    <el-button @click="cancelHistory">取消</el-button>
    <el-button @click="emptyHistory">清空</el-button>
    <el-button :loading="loadingHistory" type="primary" :disabled="this.tableDownloadData.length<1" @click="batchDownloadHistory()">批量下载</el-button>
  </div>
</el-dialog>

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) // 全部折叠
  })
}