基于 ElementUi框架的 table组件制作的 报表功能

<template>
  <!-- 月周计划报表 -->
  <div class="monthPlanForm">
    <el-table :data="tableData" :span-method="spanMethod" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column v-for="(it, i) in tableCol" :key="i" :label="it.name">
        <el-table-column v-for="(child, i) in it.children" :key="i" :prop="child.value" :label="child.name" width="120">
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableCol: {
      type: Array,
      default() {
        return [];
        // return [
        //   {
        //     name: '',
        //     children: [
        //       {
        //         name: '地市',
        //       },
        //       {
        //         name: '月计划总整治量',
        //       },
        //       {
        //         name: '光缆',
        //       },
        //     ],
        //   },
        //   {
        //     name: '地市月进度',
        //     children: [
        //       {
        //         name: '计划整治数',
        //       },
        //       {
        //         name: '完成整治数',
        //       },
        //       {
        //         name: '整治完成率',
        //       },
        //     ],
        //   },
        //   {
        //     name: '代维月进度',
        //     children: [
        //       {
        //         name: '代维单位',
        //       },
        //       {
        //         name: '计划整治数',
        //       },
        //       {
        //         name: '完成整治数',
        //       },
        //       {
        //         name: '整治完成率',
        //       },
        //     ],
        //   },
        //   {
        //     name: '代维回退率',
        //     children: [
        //       {
        //         name: '回退作业项数',
        //       },
        //       {
        //         name: '提交作业项数',
        //       },
        //       {
        //         name: '回退率',
        //       },
        //     ],
        //   },
        //   {
        //     name: '周进展',
        //     children: [
        //       {
        //         name: '第一周进展',
        //       },
        //       {
        //         name: '第二周进展',
        //       },
        //       {
        //         name: '第三周进展',
        //       },
        //       {
        //         name: '第四周进展',
        //       },
        //     ],
        //   },
        // ];
      },
    },

    tableData: {
      type: Array,
      default() {
        return [];
      },
    },

    arraySpanMethod: {
      type: Array,
      default: () => [],
    },
  },

  watch: {
    tableData() {
      this.init();
    },
  },

  data() {
    return {
      filterData: {},
    };
  },

  mounted() {
    this.init();
  },

  methods: {
    init() {
      this.filterData = [];
      this.arraySpanMethod.forEach((e, i) => {
        this.handletableData(this.tableData.concat(), i);
      });
    },

    spanMethod({ row, column, rowIndex, columnIndex }) {
      const { property } = column;
      const filterData = this.filterData[property];

      if (!filterData) {
        return {
          rowspan: 1,
          colspan: 1,
        };
      }

      const count = filterData[rowIndex];

      if (count) {
        return {
          rowspan: count,
          colspan: 1,
        };
      }

      return {
        rowspan: 0,
        colspan: 0,
      };
    },

    spanMethod1({ row, column, rowIndex, columnIndex }) {
      let { property } = column;
      const ary = this.arraySpanMethod.find((e) => e.name === property);

      if (ary) {
        property = ary.to || property;

        const value = this.tableData[rowIndex][property];

        for (let i = 1; i < 999; i++) {
          //   if (!this.tableData[rowIndex + i]) {
          //     return {
          //       rowspan: i,
          //       colspan: 1,
          //     };
          //   }

          if (this.tableData[rowIndex - i] && value === this.tableData[rowIndex - i][property]) {
            return {
              rowspan: 0,
              colspan: 0,
            };
          }

          if (!this.tableData[rowIndex + i] || value !== this.tableData[rowIndex + i][property]) {
            return {
              rowspan: i,
              colspan: 1,
            };
          }
        }
      }

      return {
        rowspan: 1,
        colspan: 1,
      };
    },

    // 处理数据
    handletableData(data, arraySpanMethodIndex = 0) {
      const span = this.arraySpanMethod[arraySpanMethodIndex];

      if (span) {
        const { from } = span;
        const spanName = span.name;
        const filed = span.to || span.name;

        // data.sort((a, b) => a[spanName] - b[spanName]);

        const date = this.filterData;

        let oldName = '';

        const setName = [];

        let oldIndex = 0;

        let fromString = null;

        data.forEach((element, i) => {
          if (oldName === element[filed] && (!fromString || fromString === element[from])) {
            date[spanName][oldIndex]++;
          } else {
            if (!date[spanName]) {
              date[spanName] = {};
            }
            date[spanName][i] = 1;
            oldIndex = i;

            if (from) {
              fromString = element[from];
            }

            oldName = element[filed];
            setName.push(oldName);
          }
        });
      }
    },
  },
};
</script>

<style></style>

调用方式为

<template>
  <!-- 测试任务详情 -->
  <div class="queryComplanyTaskTotal">
    <FormItem ref="supplyFormItem" :layout="layout" :form.sync="form">
      <template slot="canshu">
        <search-form ref="searchForm" slot="searchBox" :searchItems="searchItems" @onSearch="onSearch" />
      </template>
      <template slot="table">
        <month-plan-form
          :tableCol="tableCol"
          :tableData="tableData"
          :arraySpanMethod="arraySpanMethod"
        ></month-plan-form>
      </template>
    </FormItem>
  </div>
</template>

<script>
import MonthPlanForm from 'components/business/reportForms/monthPlanForm.vue';
import { queryComplanyTaskTotal } from '@/api/router/renovate';
import SearchForm from '@/components/searchForm/searchForm.vue';
import FormItem from '@/components/formItem';

export default {
  components: {
    MonthPlanForm,
    SearchForm,
    FormItem,
  },
  data() {
    return {
      form: {},

      layout: [
        {
          title: '地市标准化整治任务进度（整治项）',
          render: 'canshu',
        },
        {
          title: '',
          render: 'table',
        },
      ],

      searchItems: [
        {
          type: 'dataPicker',
          label: '年份',
          initValue: '',
          props: {
            type: 'month',
            format: 'yyyy-MM',
            fieldName: 'year',
            placeholder: '选择年份',
            minWidth: '236px',
          },
        },
        // {
        //   type: 'input',
        //   label: '标题',
        //   initValue: '',
        //   props: {
        //     fieldName: 'title',
        //     minWidth: '236px',
        //   },
        // },
        // {
        //   type: 'select',
        //   label: '任务状态',
        //   initValue: '',
        //   props: {
        //     fieldName: 'status',
        //     options: this.common().orderCompanyViewStatus,
        //     minWidth: '178px',
        //   },
        // },
      ],
      tableCol: [
        {
          name: '',
          children: [
            {
              name: '地市',
              value: 'cityName',
            },
            {
              name: '月计划总整治量',
              value: 'cityPlanNum',
            },
            {
              name: '整治类型',
              value: 'subCategory',
            },
            {
              name: '整治内容',
              value: 'middleCategory',
            },
          ],
        },
        {
          name: '地市月进度',
          children: [
            {
              name: '计划整治数',
              value: 'projectPlanNum',
            },
            {
              name: '完成整治数',
              value: 'projectFinishNum',
            },
            {
              name: '整治完成率',
              value: 'projectRate',
            },
          ],
        },
        {
          name: '代维月进度',
          children: [
            {
              name: '代维单位',
              value: 'complanyName',
            },
            {
              name: '计划整治数',
              value: 'complanyPlanNum',
            },
            {
              name: '完成整治数',
              value: 'complanyFinishNum',
            },
            {
              name: '整治完成率',
              value: 'complanyRate',
            },
          ],
        },
        {
          name: '代维回退率',
          children: [
            {
              name: '回退作业项数',
              value: 'companyFallbackNum',
            },
            {
              name: '提交作业项数',
              value: 'complanySubmitToNum',
            },
            {
              name: '回退率',
              value: 'complanyFallbackRate',
            },
          ],
        },
        {
          name: '周进展',
          children: [
            {
              name: '第一周进展',
              value: 'firstWeek',
            },
            {
              name: '第二周进展',
              value: 'secondWeek',
            },
            {
              name: '第三周进展',
              value: 'thirdWeek',
            },
            {
              name: '第四周进展',
              value: 'fourthWeek',
            },
            {
              name: '第五周进展',
              value: 'fifthWeek',
            },
            {
              name: '第六周进展',
              value: 'sixthWeek',
            },
          ],
        },
      ],
      tableData: [],
      arraySpanMethod: [
        { name: 'cityName' },
        {
          name: 'cityPlanNum',
          to: 'cityName',
        },
        {
          name: 'subCategory',
          from: 'cityName',
        },
        {
          name: 'middleCategory',
          from: 'cityName',
        },
        {
          name: 'projectPlanNum',
          to: 'middleCategory',
        },
        {
          name: 'projectFinishNum',
          to: 'middleCategory',
        },
        {
          name: 'projectRate',
          to: 'middleCategory',
        },
      ],

      param: {
        data: {
          year: 2023,
          month: 10,
          // cityId: '',
          // subCategory: '',
          // middleCategory: '',
        },
        pageNo: 1,
        pageSize: 100,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getData().then((res) => {
        if (Number(res.code) === 200) {
          this.tableData = res.data.data;
        }
      });
    },

    getData() {
      return queryComplanyTaskTotal(this.param);
    },

    onSearch(form) {
      const time = form.year?.split('-');

      if (time) {
        this.param.data.year = time[0];
        this.param.data.month = time[1];
      } else {
        this.param.data.year = '2023';
        this.param.data.month = '10';
      }

      this.init();
    },
  },
};
</script>

<style lang="less">
.test {
  height: 100%;
}
</style>