表尾指定列展示合计

基础用法

属性	值	说明
:show_summary	true/false	true：显示尾行，false隐藏尾行
:summary_method	函数名	传递一个函数，用于接收和控制尾行各列显示内容

示例如下：

<script lang="ts">
// 引入yui-table大小样式组件
  import {yuiTableClass} from '@/enums/tableEnum';
  
  methods: {
      getSummaries(param) {
        const {columns} = param;
        const sums: any[] = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            // 控制显示尾行名称：合计、汇总等
            sums[index] = '合计';
            return;
          }
           //column.property prop的值
          switch (column.property) {
            //这里是根据prop来判断是哪一列的数据
            case "address":
              sums[index] = '--';
              break;
            case "num":
              //sums[index]是固定写法  指定这一列要显示的后台数据
              sums[index] = this.getAllTotalData["levelOneTotal"];
              break;
            case "age":
              sums[index] = this.getAllTotalData["levelTwoTotal"];
              break;
            case "name":
              sums[index] = this.getAllTotalData["levelThreeTotal"];
              break;

            default:
              break;
          }
        });
        return sums;
      },


    },

</script>

<yui-table
    :rowData="rowData数据对象"
    :headerData="headerData数据对象"
    :controlAtrr="controlAtrr数据对象"
    :show_summary=true
    :summary_method="getSummaries"
>
</yui-table>

效果

指定各列显示对应的合计数据内容

注意事项

只设置“:show_summary”时，默认只合计当前数据页中纯数字的列