
 table表格下方合并写法:
 1:单行合并
 (1)在标签中加入属性
   :summary-method="getSummaries"
            :show-summary="true"
 <el-table
            :data="data"
            id="tableRef"
            ref="tableRef"
            row-key="belnr"
            class="td-bacg-white"
            :summary-method="getSummaries"
            :show-summary="true"
          >
            <template v-for="(item1, index1) in tableColumns">
              <template v-if="item1.children">
                <el-table-column
                  :key="index1"
                  :label="item1.title"
                  align="center"
                >
                  <template v-for="item in item1.children">
                    <el-table-column
                      v-if="!item.hidden"
                      :align="item.align || 'center'"
                      :prop="item.dataIndex"
                      :label="item.title"
                      :min-width="item.width"
                      :key="item.dataIndex"
                      :show-overflow-tooltip="
                      item.overflow === false ? false : true
                    "
                    >
                      <template #default="scope">
   
              <template >
                <el-table-column
                  :align="item1.align || 'center'"
                  :key="index1"
                  :prop="item1.dataIndex"
                  :label="item1.title"
                  :fixed="item1.fixed || false"
                  :min-width="item1.width"
                  show-overflow-tooltip
                >
                  <template #default="scope">
                    <span
                      v-if="item1.filterType === 'toThousandFilter'"
                    >
                    {{
                        toThousandFilter(
                          Number(scope.row[`${item1.dataIndex}`] || 0)
                        )
                      }}
                  </span>
                  <span v-else-if="item1.dataIndex === 'ii'">
                      <span>{{ scope.row[`${item1.dataIndex}`] }}%</span>
                  </span>
                    <span v-else>
                    <span>{{ scope.row[`${item1.dataIndex}`] }}</span>
                  </span>
                  </template>
                </el-table-column>
              </template>
            </template>
          </el-table>
(2)合并方法
 下方判断字段为 uu ii 的两个字段计算合并。
/**
 * 合计
 */
interface SummaryMethodProps<T = SpmxListType> {
  columns: TableColumnCtx<T>[];
  data: T[];
}
function getSummaries(param: SummaryMethodProps) {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 1) {
      sums[index] = '合计';
      return;
    }
    if (
      column.property !== 'uu' &&
      column.property !== 'ii'
    ) {
      sums[index] = '';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    console.log(columns, '==columns');
    if (!values.every(value => isNaN(value))) {
      sums[index] = values
        .reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return prev + curr;
          } else {
            return prev;
          }
        }, 0)
        .toString();
      sums[index] = Number(sums[index]).toFixed(2);
      if (
        column.property === 'ii'
      ) {
        // 加百分号
        sums[index] = sums[index]+'%';
      }else{
        // 加千叶符
        sums[index] = toThousandFilter(Number(sums[index]));
      }
    } else {
      sums[index] = '';
    }
  });
  console.log(sums);
  return sums;
}
2.如果下方合并是两行的,用到Render函数。
 (利用render函数插入2个div作为2行展示)
function getSummaries(param: SummaryMethodProps) {
  const { columns, data } = param;
  const sums: string[] = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '小计 total', ),
        h("div", '% of total', ),
      ]);
      // sums[index] =  <div>
      //     <div>合计</div>
      //   <div> 备注</div>
      //   </div>;
      return;
    }
    if (index === 1) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '1234567', ),
        h("br", '', ),
      ]);
      return;
    }   if (index === 2) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '100%', ),
        h("div", '12%', ),
      ]);
      return;
    }
    if (index === 3) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '1234567', ),
        h("br", '', ),
      ]);
      return;
    }
    if (index === 4) {
      // sums[index] = '小计 total';
      sums[index] =  h('div', {class: ''},[
        h("div", '100%', ),
        h("div", '88%', ),
      ]);
      return;
    }
    if (
      column.property !== 'ee' &&
      column.property !== 'rr'
    ) {
      sums[index] = '';
      return;
    }
  });
  console.log(sums);
  return sums;
}



















