VUEelement-ui之table表格横向展⽰（表尾汇总）
产品需求：在正常表格下⽅进⾏⼀系列汇总（如：合计等），分析之后发现需要拼接⼀个或多个横向排列的表格。
实现步骤：
模板部分：
<el-table :data="DataBefore">
<!--此处为正常纵向表格，直接将横向表格拼接在下⽅-->
</el-table>
<!-- 合计 -->
<section>
<el-table
:show-header="false"
:data="tableDataBll"
border
>
<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
>
<!-- :span-method="objectSpanMethod"
:cell- -->
<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.$peName)
const params ={ id:this.$route.query.id }
console.log(`修改前的值---`,JSON.parse(res.oldRecord))
//console.log(`修改后的值---`, JSON.wRecord))
const oldData =JSON.parse(res.oldRecord)//这⾥接⼝返回的json字符串特殊处理为json格式//const newData = JSON.wRecord)
//this.form1 = { ...oldData }
this.oldRecord = oldData //横向表格数据
this.DataBefore = oldData.list //正常表格的数据
//this.form2 = { ...newData }
//wRecord = newData
//this.DataAfter = newData.listelement表格横向滚动条
})
}
来看效果图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。