综合社区网站开发费用,免费下载大都会,cms网站建设系统,天津站建站时间ElementUI 表格合并单元格 文章目录 ElementUI 表格合并单元格[TOC](文章目录)一、表头合并二、单元格合并1、示例代码2、示例效果 一、表头合并
参考#xff1a; https://www.jianshu.com/p/2befeb356a31
二、单元格合并
1、示例代码
templatedivel-…ElementUI 表格合并单元格 文章目录 ElementUI 表格合并单元格[TOC](文章目录)一、表头合并二、单元格合并1、示例代码2、示例效果
一、表头合并
参考 https://www.jianshu.com/p/2befeb356a31
二、单元格合并
1、示例代码
templatedivel-tablesizesmallborderclasscustom-tab:datatableBody:span-methodobjectMergeMethod:cell-stylecolumnStyle:row-class-namerowStyle:header-cell-style{background: #87CEFA,color: #38434F,fontWeight: 500,fontSize: 14px,}!-- el-table-column typeindex label序号 width58 aligncenter/el-table-column --el-table-column proptype label姓名 aligncenter width140px/el-table-columnel-table-column propname label科目 aligncenter/el-table-columnel-table-column propsysData label成绩 aligncenter/el-table-columnel-table-column propcontractData label排名 aligncenter/el-table-column/el-table/div
/templatescript
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,};}}},},
};
/scriptstyle langscss 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;}
/style2、示例效果
