<template><div class="listTable"><el-table:data="listData":span-method="objectSpanMethod"class="tableArea"borderstyle="width: 50%"><el-table-column label="时间" align="center"><el-table-column prop="type1" label="序号" align="center" width="200" /><el-table-column prop="sheetType" label="工单类型" /><el-table-column prop="taskKey" label="taskKey" /><el-table-column label="操作"><template slot-scope="scope"><div><div class="conHe"><p>等待时间</p></div><div class="conHe"><div class="con1"></div><div class="con2"></div></div><div class="conHe"><p>运行时间</p></div></div></template></el-table-column></el-table-column></el-table></div></template><script>export default {name: "myNeedDeal",data() {return {rowList: [],spanArr: [],position: 0,listData: []};},methods: {queryData() {//查询操作this.listData = [{id: 1,type1: 1,sheetType: "事件单",taskKey: "shijian_01",templateUrl: "/shijian_01"},{id: 2,type1: 1,sheetType: "事件单",taskKey: "shijian_02",templateUrl: "/shijian_02"},{id: 3,type1: 1,sheetType: "事件单",taskKey: "shijian_03",templateUrl: "/shijian_04"},{id: 1,type1: "次品产量",sheetType: "1537units",taskKey: "4.67%",templateUrl: "/shijian_01"},{id: 2,type1: "合格产量",sheetType: "32341units",taskKey: "95.33%",templateUrl: "/shijian_02"},{id: 3,type1: "总计",sheetType: "32878units",taskKey: "100%",templateUrl: "/shijian_04"}];this.rowspan();},rowspan() {this.listData.forEach((item, index) => {if (index === 0) {this.spanArr.push(1);this.position = 0;} else {//type3 这个字段随便写，不知道有啥用，删掉就不能合并了，不理解if (this.listData[index].type3 === this.listData[index - 1].type3) {this.spanArr[this.position] += 1;this.spanArr.push(0);} else { this.spanArr.push(1);this.position = index;}}});},objectSpanMethod({ row, column, rowIndex, columnIndex }) {console.log(this.spanArr)//表格合并行if (columnIndex === 3) {const _row = this.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;console.log(_row)console.log(_col)return {rowspan: _row,colspan: _col};}}},mounted() {this.queryData();}};</script><style lang="scss">.listTable {.conHe {height: 100%;width: 40%;float: left;p {margin-top: 68px;}}.conHe:nth-child(2) {width: 20%;}.conHe:nth-child(3) {float: right;p {margin-top: 88px;margin-left: 8px;}}.con1 {height: 90px;background-color: #fcbe8f;}.con2 {height: 30px;background-color: #8eb2d6;}.thead tr:nth-child(2) {display: none;}}</style>
