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"
    >
      <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: {
    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 === 2) {
        // 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>