<template>
  <div class="table-container">
    <el-table
      size="mini"
      :header-cell-style="{'background':'#d3e0ff'}"
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <template v-for="item in tableHeader">       
        <el-table-column
            :key="item.key"
            :label="item.label"
            align="center">
          <template slot-scope="scope">
              <span>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
 import { getItemGridTableData } from '@/api/index';
   export default {
    data() {
      return {
        tableHeader:[],
        tableData: [],
        spanArr: [], // 一個(gè)空的數(shù)組，用于存放每一行記錄的合并數(shù)
        pos: 0, // spanArr 的索引
        contentSpanArr: [],
        position: 0,
      };
    },
    mounted(){
      this.getItemGridTableData();
      
    },
    methods: {
      async getItemGridTableData(){
        let res = await getItemGridTableData();
        this.tableData = res.data.data.tableData;
        this.tableHeader = res.data.data.tableHeader;
        
        this.getSpanArrFunc(this.tableData);
      },
      getSpanArrFunc(data){
        this.spanArr = [];
        let pos;
        for (let i = 0; i < data.length; i++) {
            if (i === 0) {
                this.spanArr.push(1)
                pos = 0
            } else if (
                data[i].itemNo &&
                data[i].itemNo === data[i - 1].itemNo
            ) {
                this.spanArr[pos] += 1
                this.spanArr.push(0)
            } else {
                this.spanArr.push(1)
                pos = i
            }
        }
        console.log(this.spanArr)
      },
      objectSpanMethod({rowIndex, columnIndex }) {
        if (columnIndex === 0  || columnIndex === 1 || columnIndex === 2|| columnIndex === 3) {
            const _row = this.spanArr[rowIndex]
            const _col = _row > 0 ? 1 : 0
            return {
                rowspan: _row,
                colspan: _col
            }
        }

      }
    }
  };
</script>
<style scoped>
.table-container{
  padding: 10px;
}
</style>

<template>
  <div class="table-container">
    <el-table
      size="mini"
      :stripe="false"
      :header-cell-style="{'background':'#d3e0ff'}"
      :row-class-name="rowClass"
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <template v-for="item in tableHeader">
        <el-table-column
            :fixed="item.key == 'itemNo' || item.key == 'itemName' || item.key == 'amount'"
            :key="item.key"
            :label="item.label"
            align="center">
          <template slot-scope="scope">
              <span>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
 import { getItemGridTableData } from '@/api/index';
   export default {
    data() {
      return {
        tableHeader:[],
        tableData: [],
        spanMethodOption: {}
      };
    },
    mounted(){
      this.getItemGridTableData();
      
    },
    methods: {
      async getItemGridTableData(){
        let res = await getItemGridTableData();
        this.tableData = res.data.data.tableData.map(item =>{
          if (this.spanMethodOption[item.itemNo]) {
                this.spanMethodOption[item.itemNo] += 1
                item.isShow = false;
            } else {
                this.spanMethodOption[item.itemNo] = 1
                item.isShow = true;
            }
            return item;
        })
        this.tableHeader = res.data.data.tableHeader;
      },
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0  || columnIndex === 1 || columnIndex === 2|| columnIndex === 3) {
          if (row.isShow) {
              return [this.spanMethodOption[this.tableData[rowIndex].itemNo], 1]
          }else{
              return [0, 0]
          }
        }

      },
      rowClass({row, rowIndex}) {
          var arr = []
          Object.keys(this.spanMethodOption).forEach((item, index)=>{
              if(row.itemNo == item) {
                  if(index %2 === 0) {
                      arr.push('even-row')
                  }else{
                      arr.push('odd-row')
                  }
              }
          })
          return arr
      },
    }
  };
</script>
<style scoped lang="scss">
.table-container{
  padding: 10px;
  /deep/ .el-table {
      .version-table th {
          background-color:#797979;
          .cell {
              color:#fff;
          }
      }
      .even-row {
          background-color: #fff;
      }
      .odd-row {
          background-color: antiquewhite;
      }
  }
}
</style>