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

代码:

复制代码
<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>
复制代码

 

posted @   一点元气  阅读(1285)  评论(0编辑  收藏  举报
编辑推荐:
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示