JS多表格离散选中项处理-多页签

问题：实际业务中有一个多Tab的多表格数据UI界面，即：在每一个Tab下去渲染多个Table的数据，而且这些表格是离散的，即：@selection-change事件只能获取当前表格的选中项，而我们的业务是要求获取多个离散的选中项

之前已经有一篇 ‘JS多表格离散选中项处理’的博客，而此篇是解决多Tab下的多表格选中项处理，与上一篇大同小异，只是多了Tab的Dom遍历处理

<div class="table-area" v-for="(cartItem, cardId) in cartList" :key="cardId">
<el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="服饰区" name="first">
	    <el-table :data="cartItem.itemDetails" style="width: 100%" 
	    @selection-change="(val)=>handleSelectionChange('服饰', 1)"
	   :ref="`multiTable-${cartItem.cartId}`">
	    <el-table-column prop="name" label="名称"></el-table-column>
	    <el-table-column prop="time" label="时间"></el-table-column>
	    <el-table-column prop="price" label="价格"></el-table-column>
	    <el-table-column prop="counts" label="数量"></el-table-column>
	  </el-table>
    </el-tab-pane>
    <el-tab-pane label="生活区" name="second">
     <el-table :data="cartItem.itemDetails" style="width: 100%" 
     @selection-change="(val)=>handleSelectionChange('生活区', 2)"
	   :ref="`multiTable-${cartItem.cartId}`">
	    <el-table-column prop="name" label="名称"></el-table-column>
	    <el-table-column prop="time" label="时间"></el-table-column>
	    <el-table-column prop="price" label="价格"></el-table-column>
	    <el-table-column prop="counts" label="数量"></el-table-column>
	  </el-table>
    </el-tab-pane>
    <el-tab-pane label="工作区" name="third">
	    <el-table :data="cartItem.itemDetails" style="width: 100%" 
	    @selection-change="(val)=>handleSelectionChange('工作区', 3)"
	   :ref="`multiTable-${cartItem.cartId}`">
	    <el-table-column prop="name" label="名称"></el-table-column>
	    <el-table-column prop="time" label="时间"></el-table-column>
	    <el-table-column prop="price" label="价格"></el-table-column>
	    <el-table-column prop="counts" label="数量"></el-table-column>
	  </el-table>
    </el-tab-pane>
  </el-tabs>
</div>

// 处理选中id
    handleSelectionChange(tab, num) {
      let selectedIdList = []
      for (let item of this.cartList) {
        switch (tab) {
          case '服饰区':
          // 在循环中this.$refs['multiTable']获取的Dom组件的数组length是 3，
          // 分别对应三个页签，所以这里的num就作为Dom数组的index，获取对应的selections
          // 而这里有三个Tab,所以有3个Dom组件，需要添加判断，一一对应
          // 获取第1个Tab的selections,所以num取传递过来的 0
            this.selectedTableList = this.$refs[`multiTable-${item.cartId}`][num].selection
            break
          case '生活区':
          // 获取第2个Tab的selections,所以num取传递过来的 1
            this.selectedTableList = this.$refs[`multiTable-${item.cartId}`][num].selection
            break
          case '工作区':
          // // 获取第3个Tab的selections,所以num取传递过来的 2
            this.selectedTableList = this.$refs[`multiTable-${item.cartId}`][num].selection
            break
        }
        for (let option of this.selectedTableList) {
          // for (let list of option.list) {
            selectedIdList.push(option.cartId)
          // }
        }
      }
      this.selectedIdArr = selectedIdList.join(',') // 获取选中的id数组,以逗号隔离 1001, 2002, 3003
      // 然后这个this.selectedIdArr就可以作为参数传递给接口了
    }