element+vue table展开行中合并列

//html
<el-table v-loading="loading" :data="detalList" border stripe :row-key='getRowKeys' :expand-row-keys="expands" @expand-change="getSpanArr" >
      <el-table-column type="expand">
        <template #default="{row}">
          <el-table v-loading="loading" :data="row.detailOutDTOS" border stripe
                    :span-method="objectSpanMethod" style="width: 93%;margin: 0 auto;">
            <el-table-column label="图片" prop="goodsPictureRelative" align="center"/>
            <el-table-column label="货物品名" prop="goodsName" align="center"/>
            <el-table-column label="件数" prop="itemNum" align="center"/>
          </el-table>
        </template>
      </el-table-column>
    </el-table>


//js

function getSpanArr(row,expandedRows ) {
  //row是当前展开的行，expendedRows是所有已经展开行的

  //只有一行是展开状态
  if (expandedRows.length) {
    expands.value = []
    if (row) {
      expands.value.push(row.id)
    }
  } else {
    expands.value = []
  }

  const data = expandedRows.length > 0 ? expandedRows[expandedRows.length-1].detailOutDTOS : []
  spanArr.value = []
  for (let i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.value.push(1);
      pos.value = 0
    } else { // 判断当前元素与上一个元素是否相同
      if (data[i].storefront === data[i - 1].storefront) {
        spanArr.value[pos.value] += 1;
        spanArr.value.push(0);
      } else {
        spanArr.value.push(1);
        pos.value = i;
      }
    }
  }
}

function objectSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 16 || columnIndex === 8) {
    const _row = spanArr.value[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

function getRowKeys (row) {
  return row.id
}

:row-key='getRowKeys' :expand-row-keys="expands"属性是定义只允许展开一行

@expand-change="getSpanArr"     :span-method="objectSpanMethod"属性定义合并列