el-table 組件實現 “合并單元格 + N行數據小計” 功能

需求 - 要實現的效果

在這里插入圖片描述

父組件中 info 數據示例

const info = {itemMap: {警告: [{total: 28,cfzl: '1',cfzlView: '警告',wfxl: '12',wfxlView: '超速行駛',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 3,cfzl: '1',cfzlView: '警告',wfxl: '17',wfxlView: '未低速通過',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 6,cfzl: '1',cfzlView: '警告',wfxl: '26',wfxlView: '違法停車',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 21,cfzl: '1',cfzlView: '警告',wfxl: '28',wfxlView: '違法裝載',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 3,cfzl: '1',cfzlView: '警告',wfxl: '49',wfxlView: '其他影響安全行為',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 1,cfzl: '1',cfzlView: '警告',wfxl: '28',wfxlView: '違法裝載',jtfs: 'B21',jtfsView: '中型欄板半掛車'}],罰款: [{total: 56,cfzl: '2',cfzlView: '罰款',wfxl: '12',wfxlView: '超速行駛',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 6,cfzl: '2',cfzlView: '罰款',wfxl: '17',wfxlView: '未低速通過',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 12,cfzl: '2',cfzlView: '罰款',wfxl: '26',wfxlView: '違法停車',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 42,cfzl: '2',cfzlView: '罰款',wfxl: '28',wfxlView: '違法裝載',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 6,cfzl: '2',cfzlView: '罰款',wfxl: '49',wfxlView: '其他影響安全行為',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{total: 2,cfzl: '2',cfzlView: '罰款',wfxl: '28',wfxlView: '違法裝載',jtfs: 'B21',jtfsView: '中型欄板半掛車'}]},columns: [{// total: 28,// cfzl: '1',// cfzlView: '警告',// wfxl: '12',// wfxlView: '超速行駛',jtfs: 'B11',jtfsView: '重型欄板半掛車'},{// total: 1,// cfzl: '1',// cfzlView: '警告',// wfxl: '28',// wfxlView: '違法裝載',jtfs: 'B21',jtfsView: '中型欄板半掛車'}]
}

初始代碼

父組件

<!-- info 數據來源 → info 數據示例 -->
<CommonTable :info="info"/>

CommonTable.vue 子組件

<template><el-table:data="tableData"borderstripemax-height="400"size="mini":span-method="firstColMergeSpan"><el-table-column align="center" prop="cfzl" label="處罰種類" /><el-table-column align="center" prop="wfxwfl" label="違法行為分類" /><el-table-columnv-for="(item, index) in columns":key="index"align="center":prop="item.jtfs":label="item.jtfsView || '-'"><template slot-scope="{ row, $index }"><span>{{ row[item.jtfs] | noDataFilter }}</span></template></el-table-column><el-table-column align="center" prop="xj" label="小計" /></el-table>
</template><script>
export default {name: 'CommonTable',components: {},props: {info: {type: Object,required: true}},data() {return {spanArr: []}},computed: {tableData() {const list = []Object.entries(this.info?.itemMap || {}).forEach((i) => {i[1]?.forEach((ii) => {list.push({// cfzl: ii.cfzlView,cfzl: i[0],wfxwfl: ii.wfxlView,[ii.jtfs]: ii.total,jtfs: ii.jtfs})})})return list.map((item) => {return {...item,xj: this.columnKeyList.reduce((a, b) => {return a + (item[b] || 0)}, 0)}})},columns() {return this.info.columns || []},columnKeyList() {return this.columns.map((item) => item.jtfs)}},watch: {info() {this.xjPosition()this.firstColMergeCount()}},created() {},methods: {// 計算小計行插入位置xjPosition(Human = this.tableData) {const doctorMap = {}for (let i = 0; i < Human.length; i++) {// 找出相同名稱的行數const doctorName = Human[i].cfzlif (doctorMap[doctorName] !== undefined) {doctorMap[doctorName].push(i)} else {doctorMap[doctorName] = [i]}}const keyArr = []for (const k in doctorMap) {// 取出key并倒序，防止正序插入會影響行下標keyArr.unshift(k)}keyArr.forEach((ele, index) => {const lastIndex = doctorMap[ele][doctorMap[ele].length - 1] // 找出相同名稱最后一行插入合計數據const obj = this.xjRowDataCalc(Human, ele) // 計算出小計行數據Human.splice(lastIndex + 1, 0, obj) // 插入})},// 小計行計算xjRowDataCalc(data, name) {const obj = {cfzl: name, // 第一列用于合并單元格wfxwfl: '小計'}this.columnKeyList.forEach((key) => {obj[key] = 0})data.forEach((item) => {// “處罰種類” 相同的加起來if (item.cfzl === name) {this.columnKeyList.forEach((key) => {obj[key] += Number(item[key] || 0)})}})obj.xj = this.columnKeyList.reduce((a, b) => {return a + (obj[b] || 0)}, 0)return obj},// 合并單元格firstColMergeSpan({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}},// 計算要合并的單元格firstColMergeCount() {let contactDot = 0this.spanArr = []this.tableData.forEach((item, index) => {item.index = indexif (index === 0) {this.spanArr.push(1)} else {// 根據相同 “處罰種類” 來合并if (item.cfzl === this.tableData[index - 1].cfzl) {this.spanArr[contactDot] += 1this.spanArr.push(0)} else {contactDot = indexthis.spanArr.push(1)}}})}}
}
</script><style lang='scss' scoped>
</style>

代碼升級（可供多個表格使用）

圖1
在這里插入圖片描述
圖2

圖3

圖4

根據接口返回數據不同（數據格式一致，只是部分字段名不一致），向子組件傳入不同的字段名。

`CommonTable.vue 子組件`

<template><el-table:data="tableData"borderstripemax-height="400"size="mini":span-method="firstColMergeSpan"><!-- 第一列 --><el-table-column align="center" :prop="oneColPropField" :label="oneColLabelField" /><!-- 第二列 --><el-table-column align="center" :prop="twoColPropField" :label="twoColLabelField" /><!-- 其他數量列 --><el-table-columnv-for="(item, index) in columns":key="index"align="center":prop="item[countColPropsField]":label="item[countColLabelField] || '-'"><template slot-scope="{ row, $index }"><span>{{ row[item[countColPropsField]] | noDataFilter }}</span></template></el-table-column><!-- “小計”列 --><el-table-column align="center" prop="xj" label="小計" /></el-table>
</template><script>
export default {name: 'CommonTable',components: {},props: {info: {type: Object,required: true},// 自定義表格列selfColumns: {type: Array,default: () => []},// 表格列非自定義時（接口獲取）列字段名columnKeyField: {type: String,default: 'jtfs'},// 第一列字段名oneColPropField: {type: String,required: true},// 第一列展示header文本oneColLabelField: {type: String,required: true},// 第一列數據來源字段名oneColDataField: {type: String,required: true},// 第二列字段名twoColPropField: {type: String,required: true},// 第二列展示header文本twoColLabelField: {type: String,required: true},// 第二列數據來源字段名twoColDataField: {type: String,required: true},// 其他數量 列 字段名countColPropsField: {type: String,default: 'jtfs'},// 其他數量 列 展示header文本字段名countColLabelField: {type: String,default: 'jtfsView'},// 其他數量 列 數據來源字段名countColDataField: {type: String,default: 'total'}},data() {return {spanArr: []}},computed: {// 表格數據處理tableData() {const list = []Object.entries(this.info?.itemMap || {}).forEach((i) => {i[1]?.forEach((ii) => {list.push({// [this.oneColPropField]: ii[this.oneColDataField] // 第一列數據（第一列數據部分表格 ii 中無第一列數據，所以使用↓↓↓下一行代碼 i[0] 取第一列數據）[this.oneColPropField]: i[0], // 第一列數據[this.twoColPropField]: ii[this.twoColDataField], // 第二列數據[ii[this.countColPropsField]]: ii[this.countColDataField] // 其他數量列數據// jtfs: ii.jtfs})})})return list.map((item) => {return {...item,// 計算小計數量xj: this.columnKeyList.reduce((a, b) => {return a + (item[b] || 0)}, 0)}})},columns() {/*** 表格列獲取*    父組件有傳表格列 selfColumns 就用 selfColumns*    否則用接口獲的表格列*/return (this.selfColumns.length && this.selfColumns) || this.info.columns || []},columnKeyList() {// 獲取表格每列字段名組成數組return this.columns.map((item) => item[this.columnKeyField])}},watch: {info() {this.xjPosition()this.oneColMergeCount()}},created() {},methods: {// 計算小計行插入位置xjPosition(Human = this.tableData) {const doctorMap = {}for (let i = 0; i < Human.length; i++) {// 找出相同名稱的行數const doctorName = Human[i][this.oneColPropField]if (doctorMap[doctorName] !== undefined) {doctorMap[doctorName].push(i)} else {doctorMap[doctorName] = [i]}}const keyArr = []for (const k in doctorMap) {// 取出key并倒序，防止正序插入會影響行下標keyArr.unshift(k)}keyArr.forEach((ele, index) => {const lastIndex = doctorMap[ele][doctorMap[ele].length - 1] // 找出相同名稱最后一行插入合計數據const obj = this.xjRowDataCalc(Human, ele) // 計算出小計行數據Human.splice(lastIndex + 1, 0, obj) // 插入})},// 小計行數據計算xjRowDataCalc(data, name) {const obj = {[this.oneColPropField]: name, // 第一列用于合并單元格[this.twoColPropField]: '小計' // 第二列數據}this.columnKeyList.forEach((key) => {obj[key] = 0 // 其他書兩列數據})data.forEach((item) => {// 第一列 oneColPropField 數據相同的加起來if (item[this.oneColPropField] === name) {this.columnKeyList.forEach((key) => {obj[key] += Number(item[key] || 0)})}})// 小計列數據總和（小計行和小計列交匯處數據）obj.xj = this.columnKeyList.reduce((a, b) => {return a + (obj[b] || 0)}, 0)return obj},// 合并單元格firstColMergeSpan({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}},// 計算要合并的單元格oneColMergeCount() {let contactDot = 0this.spanArr = []this.tableData.forEach((item, index) => {item.index = indexif (index === 0) {this.spanArr.push(1)} else {// 第一列相同的合并if (item[this.oneColPropField] === this.tableData[index - 1][this.oneColPropField]) {this.spanArr[contactDot] += 1this.spanArr.push(0)} else {contactDot = indexthis.spanArr.push(1)}}})}}
}
</script><style lang='scss' scoped>
</style>

使用子組件1 - `父組件 - 圖1~圖3使用`

<!-- info 數據來源 → info 數據示例 -->
<CommonTable:info="info"one-col-prop-field="cfzl"one-col-label-field="處罰種類"one-col-data-field="cfzlView"two-col-prop-field="wfxwfl"two-col-label-field="違法行為分類"two-col-data-field="wfxlView"
/>

效果展示

在這里插入圖片描述

使用子組件2 - `父組件 - 圖4使用`

<CommonTable:info="info"one-col-prop-field="cfzl"one-col-label-field="處罰種類"one-col-data-field="cfzlView"two-col-prop-field="wfxwfl"two-col-label-field="違法行為分類"two-col-data-field="wfxlView"column-key-field="timenum"count-col-props-field="timenum"count-col-label-field="label":self-columns="columns"
/><script>export default {data() {return {columns: [...Array(24).keys()].map((item) => {return {timenum: `${item}`,label: `${item}-${item + 1}`}}),info: {itemMap: {警告: [{timenum: 17,total: 9,cfzl: '1',cfzlView: '警告',wfxl: '69',wfxlView: '其他影響安全行為',jtfs: null,jtfsView: null},{timenum: 17,total: 3,cfzl: '1',cfzlView: '警告',wfxl: '58',wfxlView: '違法上道路行駛',jtfs: null,jtfsView: null}]},columns: []}}}}
</script>

效果展示

在這里插入圖片描述

注意

使用子組件1 和使用子組件2 中 info 數據不同

【代碼優化 - 解決bug】

解決數據重復問題

在這里插入圖片描述

<template><el-table:data="tableData"borderstripemax-height="400"size="mini":span-method="firstColMergeSpan"><!-- 第一列 --><el-table-column align="center" :prop="oneColPropField" :label="oneColLabelField" /><!-- 第二列 --><el-table-column align="center" :prop="twoColPropField" :label="twoColLabelField" /><!-- 其他數量列 --><el-table-columnv-for="(item, index) in columns":key="index"align="center":prop="item[countColPropsField]":label="item[countColLabelField] || '-'"><template slot-scope="{ row, $index }"><span>{{ row[item[countColPropsField]] | noDataFilter }}</span></template></el-table-column><!-- “小計”列 --><el-table-column align="center" prop="xj" label="小計" /></el-table>
</template><script>
export default {name: 'CommonTable',components: {},props: {info: {type: Object,required: true},// 自定義表格列selfColumns: {type: Array,default: () => []},// 表格列非自定義時（接口獲取）列字段名columnKeyField: {type: String,default: 'jtfs'},// 第一列字段名oneColPropField: {type: String,required: true},// 第一列展示header文本oneColLabelField: {type: String,required: true},// 第一列數據來源字段名oneColDataField: {type: String,required: true},// 第二列字段名twoColPropField: {type: String,required: true},// 第二列展示header文本twoColLabelField: {type: String,required: true},// 第二列數據來源字段名twoColDataField: {type: String,required: true},// 其他數量 列 字段名countColPropsField: {type: String,default: 'jtfs'},// 其他數量 列 展示header文本字段名countColLabelField: {type: String,default: 'jtfsView'},// 其他數量 列 數據來源字段名countColDataField: {type: String,default: 'total'}},data() {return {spanArr: []}},computed: {// 表格數據處理tableData() {const list = []Object.entries(this.info?.itemMap || {}).forEach((i) => {i[1]?.forEach((ii) => {/** ** 解決數據重復問題 start ****/const listDataIndex = list.findIndex((listItem) => listItem[this.twoColPropField] === ii[this.twoColDataField] )// 判斷即將要 push 進 list 的數據 是否與 list 中已有數據的第二列數據有重復，有重復的話，就在 list 中重復的第二列數據的行數據中只添加當前數據為“其他數量列數據”if (listDataIndex !== -1) {list[listDataIndex][ii[this.countColPropsField]] = ii[this.countColDataField]return}/** ** 解決數據重復問題 end ****/list.push({// [this.oneColPropField]: ii[this.oneColDataField] // 第一列數據（第一列數據部分表格 ii 中無第一列數據，所以使用↓↓↓下一行代碼 i[0] 取第一列數據）[this.oneColPropField]: i[0], // 第一列數據[this.twoColPropField]: ii[this.twoColDataField], // 第二列數據[ii[this.countColPropsField]]: ii[this.countColDataField] // 其他數量列數據// jtfs: ii.jtfs})})})return list.map((item) => {return {...item,// 計算小計數量xj: this.columnKeyList.reduce((a, b) => {return a + (item[b] || 0)}, 0)}})},columns() {/*** 表格列獲取*    父組件有傳表格列 selfColumns 就用 selfColumns*    否則用接口獲的表格列*/return (this.selfColumns.length && this.selfColumns) || this.info.columns || []},columnKeyList() {// 獲取表格每列字段名組成數組return this.columns.map((item) => item[this.columnKeyField])}},watch: {info() {this.xjPosition()this.oneColMergeCount()}},created() {},methods: {// 計算小計行插入位置xjPosition(Human = this.tableData) {const doctorMap = {}for (let i = 0; i < Human.length; i++) {// 找出相同名稱的行數const doctorName = Human[i][this.oneColPropField]if (doctorMap[doctorName] !== undefined) {doctorMap[doctorName].push(i)} else {doctorMap[doctorName] = [i]}}const keyArr = []for (const k in doctorMap) {// 取出key并倒序，防止正序插入會影響行下標keyArr.unshift(k)}keyArr.forEach((ele, index) => {const lastIndex = doctorMap[ele][doctorMap[ele].length - 1] // 找出相同名稱最后一行插入合計數據const obj = this.xjRowDataCalc(Human, ele) // 計算出小計行數據Human.splice(lastIndex + 1, 0, obj) // 插入})},// 小計行數據計算xjRowDataCalc(data, name) {const obj = {[this.oneColPropField]: name, // 第一列用于合并單元格[this.twoColPropField]: '小計' // 第二列數據}this.columnKeyList.forEach((key) => {obj[key] = 0 // 其他書兩列數據})data.forEach((item) => {// 第一列 oneColPropField 數據相同的加起來if (item[this.oneColPropField] === name) {this.columnKeyList.forEach((key) => {obj[key] += Number(item[key] || 0)})}})// 小計列數據總和（小計行和小計列交匯處數據）obj.xj = this.columnKeyList.reduce((a, b) => {return a + (obj[b] || 0)}, 0)return obj},// 合并單元格firstColMergeSpan({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {const _row = this.spanArr[rowIndex]const _col = _row > 0 ? 1 : 0return {rowspan: _row,colspan: _col}}},// 計算要合并的單元格oneColMergeCount() {let contactDot = 0this.spanArr = []this.tableData.forEach((item, index) => {item.index = indexif (index === 0) {this.spanArr.push(1)} else {// 第一列相同的合并if (item[this.oneColPropField] === this.tableData[index - 1][this.oneColPropField]) {this.spanArr[contactDot] += 1this.spanArr.push(0)} else {contactDot = indexthis.spanArr.push(1)}}})}}
}
</script><style lang='scss' scoped>
</style>