element plus 表格合计

参考

table 加上 show-summary :summary-method=“getSummaries”

 <el-tablev-loading="loading"show-summary:summary-method="getSummaries":data="list"><el-table-column v-if="value == 1" prop="name" label="用户名" /><el-table-column prop="team" label="团队" /><el-table-column prop="customer" label="新增客户" /><el-table-column prop="project" label="新增项目" /><el-table-column prop="personnel" label="新增人才" /><el-table-column prop="recommend" label="推荐" /><el-table-column prop="interview" label="面试" /><el-table-column prop="employment" label="录用" /><el-table-column prop="Induction" label="入职" /><el-table-column prop="warranty" label="保证期" />
</el-table>import type { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';import { useReportStore, type ListItem } from '@src/store/modules/report';interface SummaryMethodProps<T = ListItem> {columns: TableColumnCtx<T>[];data: T[];}const getSummaries = (param: SummaryMethodProps) => {console.log(param);const { columns, data } = param;const sums: Array<string | number> = [];columns.forEach((column, index) => {if (index === 0) {sums[index] = '合计';return;}const values = data.map((item) => Number(item[column.property as keyof ListItem]));if (!values.every((value) => Number.isNaN(value))) {sums[index] = values.reduce((prev, curr) => {const value = Number(curr);if (!isNaN(value)) {return prev + curr;} else {return prev;}}, 0);} else {sums[index] = 'N/A';}});return sums;
};

element plus 表格合计相关推荐

vue element计算表格合计问题
vue element计算表格合计问题问题:当表格的el-table-column标签下的属性prop属性值为'对象.属性'时,将不能自动合计. 例如: <el-tableborderv-lo ...
element UI 表格实现表尾合计行 ——小肉包
element UI 表格实现表尾合计行 --小肉包可以根据需要计算任意列的合计,效果图如下说明:elementUI 官网提供了标为合计行的计算方法,参考elementUI 官网table组件 ...
element更改表格表头、行、指定单元格样式
element更改表格表头.行.指定单元格样式更改表格的样式使用header-cell-style属性,可为函数或对象函数写法  <el-table ...
element table表格里的多选按钮，根据条件判断是否可以被选中
element table表格里的多选按钮,根据条件判断是否可以被选中 <el-table v-loading="loading" :data="contentLi ...
element ui 表格中的渲染有多个状态判断的情况
element中表格的使用模板: <el-table-column label="支付方式" width="100" align="cente ...
element ui 表格合并行和列
element ui 表格合并行和列 <el-table:data="tableData":span-method="arraySpanMethod"bo ...
element 树形表格行列转换（行列转换系列2）
我们上篇文章写的是关于element普通表格的行列转换,下面我们开始写element树形表格的行列转换实现效果: 首先:我们通过element的官方文档中可以看出.当row 字段中包含childre ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...
FineUI大版本升级，外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架...
FineUI v3.3.0 更新的内容非常多,所以一下子从 v3.2.6 连跳 3 个小版本,直接来到了 v3.3.0.详细的更新记录请参考这里:http://fineui.com/version 主 ...

element plus 表格合计

element plus 表格合计相关推荐

最新文章

热门文章