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 = null
        if(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);的输出结果

后端返回的数据

效果展示