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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库