VUE element-ui之table表格横向展示（表尾汇总）

产品需求：在正常表格下方进行一系列汇总（如：合计等），分析之后发现需要拼接一个或多个横向排列的表格。
实现步骤：
模板部分：

        <el-table :data="DataBefore">
            <!--此处为正常纵向表格,直接将横向表格拼接在下方-->
        </el-table>
<!-- 合计 -->
          <section>
            <el-table
              :show-header="false"
              :data="tableDataBll"
              border
              style="width: 100%;"
            >
              <el-table-column prop="total" align="center" />
              <el-table-column prop="totalOrder" />
              <el-table-column prop="totalArea" />
              <el-table-column prop="sendAmount" />
              <el-table-column prop="totalAmount" />
            </el-table>
          </section>
          <!-- 制表人 -->
          <section>
            <el-table
              :show-header="false"
              :data="tableDataB"
              border
              style="width: 100%"
            >
              <!-- :span-method="objectSpanMethod"
              :cell-style="columnStyle" -->
              <el-table-column prop="name1" align="center" />
              <el-table-column prop="amount1" />
              <el-table-column prop="name2" align="center" />
              <el-table-column prop="amount2" />
            </el-table>
          </section>

data中定义：

data() {
    return {
        DataBefore: [],
        oldRecord: {}
    }
}

computed中定义：

computed: {
    tableDataB() {
      return [
        { name1: '制单人', amount1: this.oldRecord.makePeople, name2: '审单人', amount2: this.oldRecord.checkPeople }
      ]
    },
    tableDataBll() {
      return [
        { total: '合计', totalOrder: '发货数量:' + ' ' + this.oldRecord.shipmentNumber, totalArea: '发货面积:' + ' ' + this.oldRecord.shipmentArea, sendAmount: '发货金额:' + ' ' + this.oldRecord.shipmentAmount, totalAmount: '总金额:' + ' ' + this.oldRecord.allAmount }
      ]
    }
 }

created中调用接口获取数据后进行处理：

created() {
    console.log(`接到的值---`, this.$route.query.typeName)
    const params = { id: this.$route.query.id }
    operate.getBasicsDetails(params).then(res => {
      console.log(`修改前的值---`, JSON.parse(res.oldRecord))
      //console.log(`修改后的值---`, JSON.parse(res.newRecord))

      const oldData = JSON.parse(res.oldRecord) //这里接口返回的json字符串特殊处理为json格式
      //const newData = JSON.parse(res.newRecord)

      //this.form1 = { ...oldData }
      this.oldRecord = oldData //横向表格数据
      this.DataBefore = oldData.list //正常表格的数据

      //this.form2 = { ...newData }
      //this.newRecord = newData
      //this.DataAfter = newData.list
    })
  }

来看效果图：