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
    })
  }