本文例項為大家分享了vue element實現表格合併行資料的具體程式碼，供大家參考，具體內容如下

支援不分頁的表格資料，分頁的表格資料還有小bug

<template>
 <el-container>
 <el-main>
 <el-table
 :data="tableData"
 border
 style="width: 100%"
 :span-method="objectSpanMethod" //新增這個實現行資料合併
 >
 <el-table-column label="序號" prop="id" align="center"></el-table-column>
  <el-table-column label="名字" prop="screenName" align="center"></el-table-column>
  <el-table-column label="時間1" prop="startTime" align="center"></el-table-column>
  <el-table-column label="時間2" prop="endTime" align="center"></el-table-column>
 </el-table>
 </el-main>
 </el-container>
</template>

<script>
export default {
 name: "Formtableyes",data() {
 return {
 //合併行
 spanArr: [],//宣告一個數組
 tableData: [
 { id: 1,screenName: "LHC",startTime: "12",endTime: "1231" },{ id: 1,endTime: "123" }
 ]
 };
 },mounted: function() {
 this.tableDatas();  //載入資料就呼叫該方法
 },methods: {
 objectSpanMethod({ row,column,rowIndex,columnIndex }) {
 if (columnIndex === 0) {   //合併第一列
 const _row = this.spanArr[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
  rowspan: _row,colspan: _col
 };
 } 
 if (columnIndex === 1) {   //合併第二列
 const _row = this.spanArr[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
  rowspan: _row,colspan: _col
 };  
 }     
 // if (columnIndex === 2) {   //合併第三列
 // const _row = this.spanArr[rowIndex];
 // const _col = _row > 0 ? 1 : 0;
 // return {
 // rowspan: _row,// colspan: _col
 // };
 // }   
 },tableDatas() {
 let contactDot = 0;
 this.tableData.forEach((item,index) => {
 item.index = index;
 if (index === 0) {
  this.spanArr.push(1);
 } else {
  if (item.id === this.tableData[index - 1].id) {
  this.spanArr[contactDot] += 1;
  this.spanArr.push(0);
  } else {
  this.spanArr.push(1);
  contactDot = index;
  }
 }
 });
 },}
};
</script>
<style scoped>
.ptselect {
 width: 100%;
}
</style>

效果如下：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。