Vue3:element-plus el-Table列表合计处理显示字符串类型/计算合计数值

需求整理

1.使用element组件库中的 el-table组件实现图上底部当前页合计的功能。在一般的情况下，只需要计算数值部分的值，因为组件中的方法中处理的就是将值的类型转换成数值类型，像string类型的字符串的话，在进行转换的时候会出现NaN的情况。

Element官网示例

官网地址:Element组件官网

将官网组件示例复制下来

1.处理官网示例方法,目前示例方法中处理的是数值类型的数据，string类型会显示N/A.

<el-table:data="PropTableS.tables"show-summary="true":summary-method="getSummaries"> </el-table><script setup >//尾部计算合计
function getSummaries(param: {columns: any[];data: any[];
}): (string | VNode)[] {const { columns, data } = param;const sums: (string | VNode)[] = [];if(proxy.$route.path.indexOf('logarithm') != -1){sums[0] = h("div", { style: { textDecoration: "underline" } }, ["本页合计"]);}else{sums[0] = h("div", { style: { textDecoration: "underline" } }, ["合计"]);}columns.slice(1).forEach((column) => {const values = data.map(//判断遍历的数据类型是 数值类型的 判断需要计算合计的列 是否能转换成 parseFloat类型，如果可以就表明值是 number类型，否则是string类型 ，在判断string类型是否是空字符串的时候 换成0 ，不为空字符串就不做处理这就是要现实的中文(item) => !isNaN(parseFloat(item[column.property])) ? parseFloat(item[column.property]) :  item[column.property] == '' ?  0  :  item[column.property]);
console.log('valuesvaluesvaluesvaluesvalues',values);//判断数组中书否包含有string类型的值 并且 是否能转换成number类型('' 空字符串换成number类型为0)  如果不行 那就是说明包含了字符串类型的值let sum:any = nullif(values.every(item => !isNaN(Number(item)))){sum = values.reduce((acc, val) => acc   + val, 0);}else{//判断是否为空，如果不为空就赋值sum,这种只能是 sum数组中 都存在所有值都想同的情况下 ,否则你将不知道取哪个字符串显示在 合计行中显示values.map(item => {if(item != '' ){sum = item}})}sums[column.property] = sum});// 根据实际列顺序返回 sums 数组// 这里假设 columns 的顺序与表格列的顺序一致return columns.map((_, index) =>index === 0 ? sums[0] : sums[columns[index].property] || "");
}</script>

代码中 console.log('valuesvaluesvaluesvaluesvalues',values);的输出结果