vue表格el-table取到某一列求和的值

elementUI官网给的求和方法只能在表尾显示，但这并不适用于现实开发。
网上给的解决方法大多没有用，希望这篇文章能帮到你。

实际开发例子：
需求：在表前位置显示电解液量总和

解释：
sumAmount.toFixed(1)的toFixed()是显示小数后几位。
tableData是你在<el-table>定义的:data=“tableData”。
electLiquid是你需要求和的列在<el-table-column>定义的 prop=“electLiquid”。
所以：
只需要修改tableData、electLiquid成你自己定义的，computed这边直接复制粘贴。

<p class="p3">保管（処理前）LiBの電解液総量:<span>{{ sumAmount.toFixed(1) }}</span>L</p><el-row :gutter="20" class="row2"><el-table:data="tableData"borderheight="340":row-style="{ height: '20px' }":cell-style="{ padding: '0px' }"size="mini"header-row-class-name="tableHead"><el-table-columntype="index":index="indexMethod"align="center"></el-table-column><el-table-column label="選択" align="center"><el-table-columntype="selection"width="75"align="center"></el-table-column></el-table-column><el-table-columnprop="getDate"label="処理施設引取日"sortablewidth="160"align="center"></el-table-column><el-table-columnprop="ctrlNum"label="荷姿管理番号"sortablewidth="150"align="center"><template scope="scope"><divclass="sub-body"@click="showinfoDetail(scope.row)">{{ scope.row.ctrlNum }}</div></template></el-table-column><el-table-columnprop="shipComp"label="受託運搬会社"width="150"align="center"></el-table-column><el-table-columnprop="delivComp"label="搬入運搬会社"sortablewidth="150"align="center"></el-table-column><el-table-columnprop="statusType"label="荷姿状態LiB種類"sortablewidth="140"align="center"></el-table-column><el-table-columnprop="electLiquid"label="電解液量"sortableclass="tablecolum1"align="center"></el-table-column><el-table-columnprop="proCplDate"label="中間処理完了日"sortablewidth="160"align="center"></el-table-column><el-table-columnprop="finCplDate"label="最終処分完了日"sortablewidth="160"align="center"></el-table-column></el-table></el-row>

<script>
export default {computed: {sumAmount() {return this.tableData.map(row => row.electLiquid).reduce((acc, cur) => parseFloat(cur) + acc, 0);}}
}
</script>

本文参考自：解决vue 表格table列求和的问题

vue表格el-table取到某一列求和的值相关推荐

vue表格（table）计算总计
<el-tablev-loading="loading":summary-method="getSummaries"show-summary:data=& ...
EL表达式取 Map、 List和数组的值
Jstl是sun的标准taglib库,Jstl是标签库和el语言的结合. el 表达式的隐含对象pageScope,requestScope,sessionScope,applicationScope ...
pluck（）取表中一列中所有值组成数组
######################!!!非常重要!!!!######################## ###########pluck是取一个字段也就是一列的所有元素的值存入一个数组中, ...
vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
Vue + Element-ui 实现table表格数据相同项合并
Vue + Element-ui 实现table表格数据相同项合并通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象 data() {return {table ...
vue+elementui 项目 table表格自定义排序规则
vue+elementui 项目 table表格自定义排序规则官方解释: 在列中设置 sortable 属性即可实现以该列为基准的排序,接受一个 Boolean,默认为 false.可以通过 Tab ...
layui 表格（table）合计取整问题更改
layui 表格(table)合计取整问题更改: layui table.js 路径 ./static/js/layui/lay/modules/table.js 提示: 如非必要,谨慎修改源码 v ...
Vue中对Table表格中的输入项进行校验
项目开发中,经常会遇到的场景:对table表格的输入项字段进行校验,同时提交时整体校验. 这个坑真的爬了好久,几个需求做完了,校验也没实现,挫败!后来看到一个博主Element UI from实现校验 ...
elementui 表格英文加数字排序_解决vue elementUI中table里数字、字母、中文混合排序问题...
1.使用场景使用elementUI中的table时,给包含数字字母中文的名称等字段排序例如:数字(0->9)->大写字母(A->Z)->小写字母(a->z)-> ...

vue表格el-table取到某一列求和的值

vue表格el-table取到某一列求和的值相关推荐

最新文章

热门文章