Vue 学习随笔系列十三 -- ElementUI 表格合并单元格

ElementUI 表格合并单元格

一、表头合并

参考： https://www.jianshu.com/p/2befeb356a31

二、单元格合并

1、示例代码

<template><div><el-tablesize="small"borderclass="custom-tab":data="tableBody":span-method="objectMergeMethod":cell-style="columnStyle":row-class-name="rowStyle":header-cell-style="{background: '#87CEFA',color: '#38434F',fontWeight: '500',fontSize: '14px',}"><!-- <el-table-column type="index" label="序号" width="58" align="center"></el-table-column> --><el-table-column prop="type" label="姓名" align="center" width="140px"></el-table-column><el-table-column prop="name" label="科目" align="center"></el-table-column><el-table-column prop="sysData" label="成绩" align="center"></el-table-column><el-table-column prop="contractData" label="排名" align="center"></el-table-column></el-table></div>
</template><script>
export default {props: {DiffData: {},isShowOpr: {default: false},},data() {return {// 表体数据tableBody: [{type: "小明",name: "语文",sysData: 10,contractData: "1",isDiff: "是",fhsj: "",},{type: "小明",name: "数学",sysData: 20,contractData: "2",isDiff: "是"},{type: "小明",name: "英语",sysData: 30,contractData: "1",isDiff: "是"},{type: "小明",name: "地理",sysData: 30,contractData: "1",isDiff: "是"},{type: "小明",name: "生物",sysData: 30,contractData: "1",isDiff: "是"},{type: "小李",name: "语文",sysData: 88,contractData: "1",isDiff: "是"},{type: "小李",name: "数学",sysData: 44,contractData: "1",isDiff: "是"},{type: "小李",name: "英语",sysData: 44,contractData: "1",isDiff: "是"},{type: "小李",name: "历史",sysData: 44,contractData: "1",isDiff: "是"},{type: "小李",name: "生物",sysData: 44,contractData: "1",isDiff: "是"},{type: "小王",name: "语文",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "数学",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "英语",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "地理",sysData: 1001,contractData: "1",isDiff: "是"},{type: "小王",name: "生物",sysData: 1001,contractData: "1",isDiff: "是"},],cellList: [], // 单元格数组count: null, // 计数};},watch: {tableBody: {immediate: true,deep: true,handler() {this.computedColumns(this.tableBody)},},},// mounted() {//   // 第1步，根据表体信息，计算合并单元格的信息//   this.computedColumns(this.DiffData);// },methods: {columnStyle({row, column, rowIndex, columnIndex}) {if(columnIndex === 0) {// 表头样式// return "background: #F5F6FA; color: #171A23; font-weight: 500; font-size: 14px; ";if(row.type == '小明') {return 'row-m1'} else if(row.type == '小李') {return 'row-m2'} else if(row.type == '小王') {return 'row-m3'} else if(row.type == 'xxx') {return 'row-m4'}}},rowStyle({ row, rowIndex }) {if(row.type == '小明') {return 'row-m1'} else if(row.type == '小李') {return 'row-m2'} else if(row.type == '小王') {return 'row-m3'} else if(row.type == 'xxx') {return 'row-m4'}// 指定行或列信息样式// if(rowIndex === 7) {//   return 'target-row'// }},// 第1步，遍历表格数据computedColumns(tableBody) {// 循环遍历表体数据for (let i = 0; i < tableBody.length; i++) {if (i == 0) {// 先设置第一项，往 cellList 中追加 1， 若下一项与当前项相同，则往 cellList中追加 0 // count 初始值为 0 this.cellList.push(1); this.count = 0; // console.log("索引", 0, this.count);} else {// 判断当前项与上一项的类别(type)是否相同，若相同则合并这一列的单元格if (tableBody[i].type == tableBody[i - 1].type) {// 如果相同, this.cellList 增加计数 1 ，并向数组追加数据 0this.cellList[this.count] += 1; this.cellList.push(0); // console.log("索引", this.count);} else {// 如果不同，往cellList数组中追加 1，并将索引赋值给 countthis.cellList.push(1); this.count = i; // console.log("索引", this.count);}}}},// 第2步，将计算好的结果返回给el-table，表格会根据结果做出对应合并列渲染objectMergeMethod({ row, column, rowIndex, columnIndex }) {// 给第一列做单元格合并。0 是第一列，1 是第二列。if (columnIndex === 0) {const rowCell = this.cellList[rowIndex];if (rowCell > 0) {const colCell = 1;return {rowspan: rowCell,colspan: colCell,};} else {// 清除所有单元格数据，防止动态数据出现表格偏移现象return {rowspan: 0,colspan: 0,};}}},},
};
</script><style lang="scss" scoped>.vueWrap {.custom-tab {margin: 0 0 20px 0;}}.data-box {display: flex;align-items: center;justify-content: center;.icon {height: 7px;width: 7px;background-color: '#333';margin: 0 2px 0 0;}}::v-deep .el-table--enable-row-transition .el-table__body td.el-table__cell {}::v-deep .target-row {color: #3363FF;font-weight: 500;}::v-deep .row-m1 {background-color: #BBFFFF;color: #333;}::v-deep .row-m2 {background-color: #FFF8DC;color: #333;}::v-deep .row-m3 {background-color: #F0FFF0;color: #333;}::v-deep .row-m4 {background-color: #E0EEE0;color: #333;}.update-btn {color: #4597EB;cursor: pointer;}
</style>

2、示例效果