vue3 ts table合计样式更改

table合计代码

          <el-table
            show-summary
            :summary-method="summary"
            :cell-style="cellStyle"
          >
         </el-table>
         

// 引入   ，因为返回不能是VNode，所以需要引入h函数
import {h} from "vue";


// 方法  （计算和官方写法一致），除了返回的时候有区分
    function summary(param: any) {
      const { columns, data } = param;

      const sums = [] as any ;
      columns.forEach((column: any, index: any) => {
        if (index === 0) {
          sums[index] = `合计（${
            state.baseInfoForPort.exchange == "CN"
              ? "元"
              : state.baseInfoForPort.exchange == "HK"
              ? "港币"
             : "美元"
         }）`;
        return;
        }
        const values = data.map((item: any) => Number(item[column.property]));
        // 针对某列做合计
        if (
          column.property == "preMarketValue" ||
          column.property == "finalMarketValue"
        ) {
          if (!values.every((value: any) => Number.isNaN(value))) {
            sums[index] = `${values.reduce((prev: any, curr: any) => {
              const value = Number(curr);
              if (!Number.isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0)}`;
          }
          // 样式更改在这里， 负数显示绿色，正数显示红色
          if(Number(sums[index])>0){
          sums[index] = h('span',{style:'color:#f56c6c'},format(Number(Number(sums[index]).toFixed(2))))
          }else
          sums[index] = h('span',{style:'color:#19BE3C'},format(Number(Number(sums[index]).toFixed(2))))
        } else {
          sums[index] = " ";
        }
      });

      return sums;
    }
 `