element table 动态合并单元格

#element table 动态合并单元格| 来源: 网络整理| 查看: 265

方法一

效果图：

优点

利用三维数组，单元格实现合并行或列

缺点

但是myMappings是写死的，不是动态生成的 export default { data() { return { tableData: [ ['BOARD_1', '', 'BOARD_2', '', 'FAN'], ['BOARD_3', '', 'BOARD_4', '', ''], ['PWR', '', '', '', ''] ] } }, methods: { tableSpanMethod({ row, column, rowIndex, columnIndex }) { var myMappings = [ [[1, 2], [0, 0], [1, 2], [0, 0], [2, 1]], [[1, 2], [0, 0], [1, 2], [0, 0], [0, 0]], [[1, 5], [1, 1], [1, 1], [1, 1], [1, 1]] ] return myMappings[rowIndex][columnIndex] } } } 复制代码方法二

element table 行合并通用方法

效果图

优点

只需要传递需合并字段的prop值，就能实现表格的动态合并

缺点

【产品小类】和【频段】是独立合并的应该先按【产品小类】合并，再按【频段】合并现在把【小类1】和【小类2】的【频段2】都合并到一起了 export default { data() { return { tableData: [ { subName: '小类1', freq: '频段1', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '2', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类1', freq: '频段1', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '5', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类1', freq: '频段2', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '6', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类1', freq: '频段2', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '9', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类2', freq: '频段2', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '9', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' } ], columns: [ { prop: 'subName', label: '产品小类', width: '100' }, { prop: 'freq', label: '频段', width: '80' }, { prop: 'itemName', label: '设备号' }, { prop: 'pillarNo', label: '位置', width: '200' }, { prop: 'totalValue', label: '测试总数', width: '80' }, { prop: 'dataValue', label: '故障数', width: '80' }, { prop: 'dataPerc', label: '故障率', width: '80' }, { prop: 'startDatetime', label: '统计开始时间', width: '135' }, { prop: 'endDatetime', label: '统计结束时间', width: '135' } ] } }, computed: { data() { return this.mergeTableRow(this.tableData, ['subName', 'freq']) } }, methods: { mergeTableRow(data, merge) { if (!merge || merge.length === 0) { return data } merge.forEach((m) => { const mList = {} data = data.map((v, index) => { const rowVal = v[m] if (mList[rowVal] && mList[rowVal].newIndex === index) { mList[rowVal]['num']++ mList[rowVal]['newIndex']++ data[mList[rowVal]['index']][m + '-span'].rowspan++ v[m + '-span'] = { rowspan: 0, colspan: 0 } } else { mList[rowVal] = { num: 1, index: index, newIndex: index + 1 } v[m + '-span'] = { rowspan: 1, colspan: 1 } } return v }) }) return data }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { const span = column['property'] + '-span' if (row[span]) { return row[span] } }, 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) } else { sums[index] = '--' } }) sums[6] = (sums[5] * 100 / sums[4]).toFixed(2) + '%' return sums } } } 复制代码方法三

效果图

优点

可以先按【产品小类】合并，再按【频段】合并，完全实现定制化合并

缺点

myMappings还未实现函数传参，知道效果图后，才能计算出myMappings export default { data() { return { tableData: [ ['小类1', '频段1', '设备号1', '位置1', '100', '2', '1%', '2020-04-13 00:00:00', '2020-04-14 00:00:00'], ['小类1', '频段1', '设备号1', '位置1', '100', '2', '1%', '2020-04-13 00:00:00', '2020-04-14 00:00:00'], ['小类1', '频段2', '设备号1', '位置1', '100', '2', '1%', '2020-04-13 00:00:00', '2020-04-14 00:00:00'], ['小类1', '频段2', '设备号1', '位置1', '100', '2', '1%', '2020-04-13 00:00:00', '2020-04-14 00:00:00'], ['小类2', '频段2', '设备号1', '位置1', '100', '2', '1%', '2020-04-13 00:00:00', '2020-04-14 00:00:00'] ], columns: [ { prop: '0', label: '产品小类', width: '100' }, { prop: '1', label: '频段', width: '80' }, { prop: '2', label: '设备号' }, { prop: '3', label: '位置', width: '200' }, { prop: '4', label: '测试总数', width: '80' }, { prop: '5', label: '故障数', width: '80' }, { prop: '6', label: '故障率', width: '80' }, { prop: '7', label: '统计开始时间', width: '135' }, { prop: '8', label: '统计结束时间', width: '135' } ] } }, methods: { objectSpanMethod({ row, column, rowIndex, columnIndex }) { /** * myMappings是一个5*9的二维数组，每个元素的值均是[x, y]， * x代表rowspan，y代表colspan，[x, y]为合并后该单元格左上角的坐标值 * [4, 1]表示，行向下合并4个单元格，列保持不变，仍为1个单元格 * [0, 0]表示，该单元格被别的单元格吞并了，不显示 * [1, 1]表示，显示原有单元格，单元格的行和列均不进行合并 */ var myMappings = [ [[4, 1], [2, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]], [[0, 0], [0, 0], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]], [[0, 0], [2, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]], [[0, 0], [0, 0], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]], [[1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1], [1, 1]] ] return myMappings[rowIndex][columnIndex] }, 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) } else { sums[index] = '--' } }) sums[6] = (sums[5] * 100 / sums[4]).toFixed(2) + '%' return sums } } } 复制代码改进方法三

效果图

优点

先按【产品小类】合并，再按【频段】合并，且myMappings已实现动态生成

缺点

myMappings生成方法不能接受传参，只能定制化合并单元格 export default { data() { return { originTableData: [ { subName: '小类1', freq: '频段1', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '2', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类1', freq: '频段1', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '5', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类1', freq: '频段2', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '6', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类1', freq: '频段2', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '9', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' }, { subName: '小类2', freq: '频段2', itemName: '设备号1', pillarNo: '位置1', totalValue: '100', dataValue: '9', dataPerc: '1%', startDatetime: '2020-04-13 00:00:00', endDatetime: '2020-04-14 00:00:00' } ], columns: [ { prop: '0', label: '产品小类', width: '100' }, { prop: '1', label: '频段', width: '80' }, { prop: '2', label: '设备号' }, { prop: '3', label: '位置', width: '200' }, { prop: '4', label: '测试总数', width: '80' }, { prop: '5', label: '故障数', width: '80' }, { prop: '6', label: '故障率', width: '80' }, { prop: '7', label: '统计开始时间', width: '135' }, { prop: '8', label: '统计结束时间', width: '135' } ], map:[] } }, computed: { tableData() { // 格式化接口返回的表格数据，每一项，对象转数组 let formatTableData = [] this.originTableData.map(item => { formatTableData.push(Object.values(item)) }) return formatTableData } }, methods: { originMap() { // 初始化一个5X9的二维数组，每一项的值均为[1,1] const rows = this.originTableData.length var arr = new Array() for(let i=0; i0; r--) { if(tab[r][1] === tab[r-1][1] && tab[r][0] === tab[r-1][0]) { map[r-1][1][0] += map[r][1][0] map[r][1] = [0, 0] } } return map }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { var myMappings = this.mergedMap() return myMappings[rowIndex][columnIndex] }, 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) } else { sums[index] = '--' } }) sums[6] = (sums[5] * 100 / sums[4]).toFixed(2) + '%' return sums } } } 复制代码

【本文地址】

公司简介

联系我们