element UI动态表格相同内容的单元格合并

Posted 2020-11-21 drw666

代码：

<template>
<div class=‘table-index‘>
  <div class=‘table-body‘>
  <el-table
      :data="detailList"
      style="width: 100%"
      :header-cell-style="rowClass"
      :span-method="objectSpanMethod"
      show-summary
      :summary-method="getSummaries"
      border>
      <el-table-column
        prop="name"
        label="标题1"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="indexName"
        label="标题2"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="columnName"
        label="标题3"
        width="180"
        align="center">
      </el-table-column>
      <el-table-column
        prop="point"
        label="标题4"
        width="180"
        align="center">
      </el-table-column>
  </el-table> 

  </div>
</div>
</template>

<script>
export default {
  components: {},
  data () {
    return {
      detailList: [],
      arr1: [],
      arr2: []

    }
  },
  computed: {},
  watch: {},
  methods: {
    setdates (arr) {
      var obj = {}
      var k = []
      // var arr1 = []
      for (var i = 0, len = arr.length; i < len; i++) {
        k = arr[i].name
        if (obj[k]) { obj[k]++ } else { obj[k] = 1 }
      }
      console.log(obj)
      // 保存结果标题1出现次数}
      for (var o in obj) {
        for (let i = 0; i < obj[o]; i++) {
          if (i === 0) {
            this.arr1.push(obj[o])
          } else {
            this.arr1.push(0)
          }
        }
      }
      console.log(this.arr1)
      var obj2 = {}
      // var j = []
      // var arr2 = []
      for (let i = 0, len = arr.length; i < len; i++) {
        k = arr[i].indexName
        if (obj2[k]) { obj2[k]++ } else { obj2[k] = 1 }
      }
      console.log(obj2)
      // 保存标题2出现次数
      for (let o in obj2) {
        for (let i = 0; i < obj2[o]; i++) {
          if (i === 0) {
            this.arr2.push(obj2[o])
          } else {
            this.arr2.push(0)
          }
        }
      }
      console.log(this.arr2)
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        let _row = this.arr1[rowIndex]
        let _col = this.arr1[rowIndex] > 0 ? 1 : 0
        return [_row, _col]
      } else if (columnIndex === 1) {
        let rows = this.arr2[rowIndex]
        let cols = this.arr2[rowIndex] > 0 ? 1 : 0
        return [rows, cols]
      } else if (rowIndex === 5) {
        if (columnIndex === 0) {
          return [1, 3]
        }
      }
    },
    getSummaries (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = ‘总和‘
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ‘ .00‘
        } else {

        }
      })
      return sums
    },
    getDetail () {
     this.$http.get(SERVER).then(
        res => {
          if (res.resultcode === ‘0‘) {
            this.detailList = res.data.datalistthis.setdates(this.detailList)
          }
        }).catch()
    }
  },
  created () {
  }
}
</script>
<style lang=‘scss‘ scoped>
//@import url(); 引入公共css类</style>