相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门
但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rowspan 的参数需要自己做判断,根据数据的相同行(或列)进行合并;
我们先看下结果:
代码附上:
1 <template> 2 <div class=""> 3 <el-table 4 :data="listData" 5 :span-method="objectSpanMethod" 6 class="tableArea" 7 style="width: 100%"> 8 <el-table-column 9 prop="type" 10 label="序号" 11 align="center" 12 width="200"/> 13 <el-table-column 14 prop="sheetType" 15 label="工单类型" 16 /> 17 <el-table-column 18 prop="taskKey" 19 label="taskKey" 20 /> 21 <el-table-column 22 prop="templateUrl" 23 label="templateUrl" 24 /> 25 <el-table-column 26 label="操作" 27 > 28 <template slot-scope="scope"> 29 <el-tooltip class="item" effect="dark" content="修改" placement="top-start"> 30 <i class="el-icon-edit-outline" @click="modify(scope)" /> 31 </el-tooltip> 32 <el-tooltip class="item" effect="dark" content="删除" placement="top-start"> 33 <i class="el-icon-delete" @click="deleteData(scope)" /> 34 </el-tooltip> 35 </template> 36 </el-table-column > 37 </el-table> 38 </div> 39 </template> 40 <script> 41 42 export default { 43 name: 'myNeedDeal', 44 data() { 45 return { 46 rowList: [], 47 spanArr: [], 48 position: 0, 49 listData: [] 50 } 51 }, 52 53 methods: { 54 queryData(){//查询操作 55 this.listData = [ 56 { 57 id:1, 58 type:1, 59 sheetType: "事件单", 60 taskKey: "shijian_01", 61 templateUrl: "/shijian_01" 62 }, 63 { 64 id:2, 65 type:1, 66 sheetType: "事件单", 67 taskKey: "shijian_02", 68 templateUrl: "/shijian_02" 69 }, 70 { 71 id:3, 72 type:1, 73 sheetType: "事件单", 74 taskKey: "shijian_03", 75 templateUrl: "/shijian_04" 76 }, 77 { 78 id:4, 79 type:2, 80 sheetType: "问题单", 81 taskKey: "wenti_01", 82 templateUrl: "/wenti_01" 83 }, 84 { 85 id:5, 86 type:2, 87 sheetType: "问题单", 88 taskKey: "wenti_02", 89 templateUrl: "/wenti_02" 90 }, 91 { 92 id:6, 93 type:2, 94 sheetType: "问题单", 95 taskKey: "wenti_03", 96 templateUrl: "/wenti_03" 97 } 98 ]; 99 this.rowspan() 100 }, 101 rowspan() { 102 this.listData.forEach((item,index) => { 103 if( index === 0){ 104 this.spanArr.push(1); 105 this.position = 0; 106 }else{ 107 if(this.listData[index].type === this.listData[index-1].type ){ 108 this.spanArr[this.position] += 1; 109 this.spanArr.push(0); 110 }else{ 111 this.spanArr.push(1); 112 this.position = index; 113 } 114 } 115 }) 116 }, 117 objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行 118 if (columnIndex === 0) { 119 const _row = this.spanArr[rowIndex]; 120 const _col = _row>0 ? 1 : 0; 121 return { 122 rowspan: _row, 123 colspan: _col 124 } 125 } 126 if(columnIndex === 1){ 127 const _row = this.spanArr[rowIndex]; 128 const _col = _row>0 ? 1 : 0; 129 return { 130 rowspan: _row, 131 colspan: _col 132 } 133 } 134 } 135 }, 136 mounted() { 137 this.queryData(); 138 } 139 } 140 </script> 141 <style lang="scss" scoped> 142 .el-select { 143 margin-right: 15px; 144 } 145 .el-input { 146 margin-right: 15px; 147 width: 200px; 148 } 149 .tableArea { 150 margin-top: 20px; 151 box-shadow: 0 0 8px 0 #aaa; 152 } 153 i[class^="el-icon"] { 154 margin-right: 5px; 155 font-size: 16px; 156 cursor: pointer; 157 } 158 .modify_table{ 159 td{ 160 padding: 10px ; 161 } 162 } 163 .item_title{ 164 text-align: right; 165 } 166 </style> 167
详细说明:
:span-method="objectSpanMethod"
这个是官方给定的绑定属性和对应的方法,objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex:当前行号
columnIndex :当前列号
该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
this.spanArr 数组 ,返回的是相对应的行合并行数
这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0],比如,第一个元素为3,表示第一行应该向下合并3行(即第一行的rowspan为3),第二个元素的rowspan为0,就让它“消失”。
rowspan()这个函数就是用来返回 this.spanArr 数组的,定义每一行的 rowspan
rowspan()函数,if( index === 0),第一行,直接先给数组push进一个1,表示自己先占一行,this.position是数组元素的位置(此时是从数组元素的第一个开始,所以this.position为0), this.position为0意思表示的就是数组的第一个元素。
当到了index为2的时候,if(this.listData[index].type === this.listData[index-1].type ),让第二行与第一行作比较,
如果第二行与第一行相等的话,this.position就+1,当有n行第一行相同,this.position就为n,表示向下合并n行;第二行自己就this.spanArr.push(0),表示第二行“消失”,因为第一行和第二行合并了啊。
如果第二行与第一行不相等的话,那么this.spanArr.push(1);就让第二行自己独占一行;this.position = index意思就是把指针拿到index这行来,表示设置数组this.spanArr[this.position]的元素值,然后定义从此行开始向下合并几行(可能这句话我表述的不是很清楚你可以根据我这个示例研究下,当index为3时,this.position为3,当index为4时,第四行与第三行需要合并,那么在数组的this.position元素就要+1了,也就是this.spanArr[this.position] += 1)
还有最后一句话
const _col = _row>0 ? 1 : 0;
定义的这一个单元格列的合并,我们项目只合并行,不合并列;
_row:代表合并行的行数,_row的值要么是1,或者更大的自然正整数,要么是0。
1代表:独占一行
更大的自然数:代表合并了若干行
0:代表“消失”的哪那一个单元格,后面的单元格向前推一格