icore-pass/src/views/statisticalReport/components/tableItem.vue

<template>
  <div>
    <el-table
      :show-summary="isShowSum"
      :data="tableData"
      :height="height"
      style="width: 100%"
      :span-method="objectSpanMethod"
      :border="true"
      :header-cell-style="headerCellStyle"
    >
      <el-table-column
        v-if="isShowBox"
        type="selection"
        width="50"
        align="center"
      >
      </el-table-column>
      <template>
        <column-item
          v-for="item in col"
          :key="item.label"
          :col="item"
        ></column-item>
      </template>
      <template #empty>
        <div class="empty" style="height:12.5rem;">
          <span class="empty-desc">暂无数据</span>
        </div>
      </template>
    </el-table>
  </div>
</template>
<script>
import ColumnItem from "./columnItem";
export default {
  name: "TableItem",
  components: {
    ColumnItem
  },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => []
    },
    // 树型结构表头数据
    col: {
      type: Array,
      default: () => []
    },
    // 是否在表格下方显示合计
    isShowSum: {
      type: Boolean,
      default: false
    },
    // 判断单元格文字是居中还是左对齐显示,默认居中
    alignType: {
      type: String,
      default: "center"
    },
    // 设置表格高度,固定表头
    height: {
      type: String,
      default: null // 默认不固定表头
    },
    // 判断是否显示多选框
    isShowBox: {
      type: Boolean,
      default: false // 默认不展示
    }
  },
  methods: {
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      let columnIndexList1 = [4];
      let columnIndexList2 = [5];
      let columnIndexList3 = [6];
      let columnIndexList4 = [7];
      if (columnIndexList1.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#fff;cursor: pointer;background-color:red !important";
      }
      if (columnIndexList2.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#fff;cursor: pointer;background-color:green !important";
      }
      if (columnIndexList3.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#fff;cursor: pointer;background-color:blue !important";
      }
      if (columnIndexList4.includes(columnIndex) && rowIndex == 0) {
        //如果有多个css样式，使用;隔开
        return "color:#000;cursor: pointer;background-color:yellow !important ";
      }
    },
    flitterData(arr) {
      var spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          // name 修改
          if (item.batchId === arr[index - 1].batchId) {
            // 第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr
      };
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 1) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
       if (columnIndex === 4) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 2) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (columnIndex === 3) {
        // this.tableData  修改
        const _row = this.flitterData(this.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col
        };
      }
      if (row.type === 1) {
        return {
          rowspan: 1,
          colspan: 17
        };
      }
    }
  }
};
</script>
<style>
/* 处理表格表头和内容错位问题 */
.el-table th.gutter {
  display: table-cell !important;
}
.el-table th,
.el-table td {
  padding: 0.4375rem 0 !important;
}
</style>