最近要寫一個如下圖的專案,需要合併單元格
<el-table :data="list" border style="width: 1000px;" :span-method="objectSpanMethod"> <el-table-column align="center" prop="frist_name" :label="list[0].specName" ></el-table-column> <el-table-column align="center" prop="second_name" :label="list[0].specName1"></el-table-column> <el-table-column align="center" prop="price" label="價格"></el-table-column> </el-table>
其中 objectSpanMethod方法是合併單元格的關鍵,以下程式碼需要賦值
mergeObj:{},
mergeCol:['frist_name'],
getSpanArr(list){ this.mergeCol.forEach(key=>{ let count=0//記了了起始位置 this.mergeObj[key]=[];//記錄每-列的合併資訊 list.forEach((item,index)=>{// index == 0表示資料為第一行,直接 push 一個 1 if(index === 0){ this.mergeObj[key].push(1) } else { // 判斷當前行是否與上一行其值相等 如果相等 在 count 記錄的位置其值 +1 if(item[key]=== list[index-1][key]){ this.mergeObj[key][count] += 1; this.mergeObj[key].push(0); } else { // 如果當前行和上一行其值不相等 count = index;//記錄當前位置 this.mergeObj[key].push(1);//重新push一個1 } } }) }) }, objectSpanMethod({ row, column, rowIndex, columnIndex }) { if(this.specsList.length!=1){ if(this.mergeCol.indexOf(column.property)!==-1){ // 判斷其值是否為0 if(this.mergeObj[column.property][rowIndex]){ return[this.mergeObj[column.property][rowIndex],1] }else{ return[0,0] } } } },