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>