<template>
  <div>
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
      <el-table-column
        prop="amount1"
        sortable
        label="数值 1">
      </el-table-column>
      <el-table-column
        prop="amount2"
        sortable
        label="数值 2">
      </el-table-column>
    </el-table>

    
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
export default {
  components: {
   
  },
  // 定义属性
  data() {
      return {
        tableData: [
          {
            id: 1,
            name: 111,
            amount1:1,
            amount2:1,
          },
          {
            id: 1,
            name: 111,
             amount1:1,
            amount2:1,
          },
          {
            id: 1,
            name: 111,
             amount1:1,
            amount2:1,
          },
          {
            id: 2,
            name: 222,
             amount1:2,
            amount2:2,
          },
          {
            id: 3,
            name: 222,
            amount1:3,
            amount2:3,
          },
          {
            id: 3,
            name: 222,
            amount1:3,
            amount2:3,
          },
          {
            id: '合计',
            name: 11,
            amount1:10,
            amount2:null,
          }
        ],
        //spanArr用于存放每一行记录的合并数
　　　　spanArr: [],
      }
    },
  // 监控data中的数据变化
  watch: {
    tableData:{
      handler(val){
        if(val.length>0){
          let contactDot = 0;
          this.tableData.forEach( (item,index) => {
            //遍历tableData数据，给spanArr存入一个1，第二个item.id和前一个item.id是否相同，相同就给
            //spanArr前一位加1，spanArr再存入0，因为spanArr为n的项表示n项合并，为0的项表示该项不显示
            if(index===0){
              this.spanArr.push(1)
            }else{
              if(item.id === this.tableData[index-1].id){
                this.spanArr[contactDot] += 1;
                this.spanArr.push(0)
              }else{
                contactDot = index
                this.spanArr.push(1)
              }
            }
          })
        }
      },
      immediate:true
    }
  },
  // 方法集合
  methods: {
     objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      //rowIndex表示当前行号，从0开始，合计是第6行
      if(rowIndex !==6){
        //columnIndex表示当前列号，这里处理ID,姓名，数值2
        if(columnIndex === 0||columnIndex===1||columnIndex===3){
          const _row = this.spanArr[rowIndex]
          const _col = _row>0?1:0;
          //该形式为行合并
          return{
            rowspan:_row,
            colspan:_col
          }
        }
        
      }else if(rowIndex ==6){
        //处理合计，[1,2]表示合并1行2列，[0,0]表示改行不显示
        if(columnIndex === 0){
          //定位到6行0列的ID，告诉该单元格合并1行2列
          return [1,2]
        }else if(columnIndex===1){
          //定位到6行1列的姓名，告诉该单元格不显示
          return [0,0]
        }
      }  
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='stylus' scoped>
  
</style>