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

</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” -->

**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.KaTeX parse error: Expected '}', got 'EOF' at end of input: …s = { 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
})

}

### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)

原文地址：https://blog.csdn.net/2401_85124621/article/details/139729741

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！