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

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

     <el-table :data="DataBefore"><!--此处为正常纵向表格,直接将横向表格拼接在下方--></el-table>
<!-- 合计 --><section><el-table:show-header="false":data="tableDataBll"borderstyle="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"borderstyle="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})}

来看效果图：

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

Element UI 之table表格表头过长使用点点…显示，并添加鼠标移入悬浮显示
Element UI 之table表格表头过长使用点点-显示,并添加鼠标移入悬浮显示需求鼠标移入表头关键点: 1.样式中添加:(如果在scope中会不起作用) .el-table .cell { ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
element ui的table表格因竖向滚动条导致表头错位问题解决
在vue项目中引入table组件,当将表格高度固定出现竖向滚动条,而且横向滚动条滚到最右边时,就会出现表头与内容错位的问题,如图解决方法: Step1:在app.vue中加入css样式 <st ...
vue+element UI的 table组件实现日历
有现成的日历插件但是不符合需求,所以项目中使用vue+element 的表格组件自己实现一个日历组件核心js部分:此部分为计算的当月的日期且包含是否可选,是否节假日等等可操作的标记,这部分基本是实现 ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
Element UI 之table表格表头过长使用点点...显示，并添加鼠标移入悬浮显示
需求: 鼠标移入表头: 关键点: 1.样式中添加 .el-table .cell {word-break: keep-all !important;white-space: nowrap !impor ...
Element UI 之table表格的封装
需求: 鼠标移入: 实现: <template><el-tableclass="table-list":data="tableData"hei ...
Vue element怎么获取table表格当前行数据和索引值
怎么拿表格当前行数据平时我们在使用表格时通过template的slot-scope="scope",使用scope.row拿到当前行的数据 <el-table max-he ...
element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...

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

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

最新文章

热门文章