el-table表格合计放在上面

el-table的表格合计官网给出了属性和方法，但是合计是在表格的下方，若是把合计行放在上面，一个简单的方法实现它：
效果如图：

方法如下：

     <el-table :data="tableData"  class="customTable" :summary-method="getSummaries" show-summary border style="width: 100%"><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="total" label="合计"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" sortable label="数值 1"><template slot-scope="{row}"><el-input v-model="row.amount1"></el-input></template></el-table-column></el-table>

 showSummariesPosition() {const table = document.querySelector('.customTable')  // customTable这个是在el-table定义的类名const footer = document.querySelector('.customTable .el-table__footer-wrapper')const body = document.querySelector('.customTable .el-table__body-wrapper')table.removeChild(footer)  // 移除表格最下方的合计行table.insertBefore(footer, body) // 把合计行插入到表格body的上面}getSummaries（）{ // 合计行的方法，官网很详细}

在mounted钩子函数调用这个方法就可以啦

el-table表格合计放在上面相关推荐

element ui table表格合计移到顶部
一.为什么默认table 的show-summary显示在尾部,如果需要移动到顶部二.如何移动没有固定列(通过样式属性order将body移动到后面去.默认的oder:0就排在了前面) /* / ...
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动
element-ui table表格增加合计行和表格列固定之后滚动条无法滚动是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table_ ...
antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示,金额字段是后端返回的数据,前端不进行计算. 因为项目的UI框架使用的是Ant Design 3.x版本,找了一下Table的使用方法 ...
实现table表格数据按名称字段分层，各层都有一个合计行，自定义的表格总合计行（vue.js+elementUI）
代码实现 <div class="tableBody" ref="tableBody"><table><div v-for=&qu ...
layui 表格（table）合计取整问题更改
layui 表格(table)合计取整问题更改: layui table.js 路径 ./static/js/layui/lay/modules/table.js 提示: 如非必要,谨慎修改源码 v ...
element-plus table表格换行变色以及部分el自带样式的修改
element-plus table表格换行变色次处为表头颜色修改 :header-cell-style="{ background: '#0B3357' }" 在el-tabl ...
bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...
layui一个表格中怎么接两个接口的值_layer学习笔记之table表格引入数据实现分页...
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的 ...
layui table 弹出层刷新_layui 关闭open弹出框刷新table表格页面的方法
layui 关闭open弹出框刷新table表格页面的方法如下所示: 保存后刷新table表格源码 //弹出框 layer.open({ type: 2, shadeClose: true, s ...

el-table表格合计放在上面

el-table表格合计放在上面相关推荐

最新文章

热门文章