ElementUI 用span-method实现循环el-table组件的合并行功能

需要把指定列的相同数据合并起来（项目中用的是updateTime）

后端返回的数据格式：

html： 

1. <el-tab-pane label="执行记录概览" name="fourth" v-loading="loading">
2.           <el-timeline v-if="recordList.length > 0">
3.             <el-timeline-item
4.               v-for="(item, index) in recordList"
5.               :key="index"
6.               :timestamp="item.createTime"
7.               placement="top"
8.             >
9.               <el-card>
10.                 <el-tabs
11.                   v-model="activeName2[index]"
12.                   @tab-click="handleClick2($event, index)"
13.                 >
14.                   <el-tab-pane label="阻断列表" name="first">
15.                     <el-table
16.                       :data="item.disposesList"
17.                       :span-method="(params) => objectSpanMethod(params, item)"
18.                       border
19.                     >
20.                       <!-- <el-table-column
21.                         align="center"
22.                         type="index"
23.                         label="序号"
24.                       /> -->
25.                       <el-table-column
26.                         prop="updateTime"
27.                         label="时间"
28.                         width="160"
29.                       >
30.                       </el-table-column>
31.                       <el-table-column prop="hostnameIp" label="域名/IP">
32.                       </el-table-column>
33.                       <!-- <el-table-column prop="type" label="阻断状态" width="100">
34.                         <template slot-scope="scope">
35.                           <span>{{ getBlockState(scope.row.blockState) }}</span>
36.                         </template>
37.                       </el-table-column> -->
38.                       <el-table-column prop="type" label="类型" width="100">
39.                         <template slot-scope="scope">
40.                           <span>{{ getTypelVal(scope.row.type) }}</span>
41.                         </template>
42.                       </el-table-column>
43.                       <el-table-column prop="label" label="标签" width="120">
44.                         <template slot-scope="scope">
45.                           <span>{{ getLabelVal(scope.row.label) }}</span>
46.                         </template>
47.                       </el-table-column>
48.                     </el-table>
49.                   </el-tab-pane>
50.                   <el-tab-pane label="快照截图" name="second">
51.                     <Snapshot :snapshotList="item.snapshotList"></Snapshot>
52.                   </el-tab-pane>
53.                   <el-tab-pane label="通信流量" name="third">
54.                     <Traffic :networkList="item.networkList"></Traffic>
55.                   </el-tab-pane>
56.                 </el-tabs>
57.               </el-card>
58.             </el-timeline-item>
59.           </el-timeline>
60.           <div v-if="!recordList.length" class="nodata">
61.             <img class="empty-pic" src="@/assets/images/nodata.png" alt="" />
62.           </div>
63.         </el-tab-pane>

复制代码

js:

1. data() {
2.     return {
3.          recordList: [],
4.           activeName2: {}, // 用一个对象来存储每个tab的激活状态
5.     }
6. }
8. methods: {
9. handleClick2(tab, index) {
10.       this.$set(this.activeName2, index, tab.name);
11. },
12. getAllList() {
13.       this.loading = true;
14.       getAllList({
15.         taskId: this.taskId,
16.       }).then((response) => {
17.         this.recordList = response.rows;
18.         this.loading = false;
20.         // 初始化activeTab对象
21.         this.recordList.forEach((item, index) => {
22.           this.$set(this.activeName2, index, "first"); // 假设默认第一个面板是激活的
23.         });
24.       });
25.   },
26. objectSpanMethod({ row, column, rowIndex, columnIndex }, item) {
27.       // console.log(row, column, rowIndex, columnIndex);
28.       if (columnIndex === 0) {
29.         // name列
30.         // 获取当前行的name值
31.         let currentName = row.updateTime;
32.         let previousName =
33.           rowIndex > 0 ? item.disposesList[rowIndex - 1].updateTime : null;
34.         let nextName =
35.           rowIndex < item.disposesList.length - 1
36.             ? item.disposesList[rowIndex + 1].updateTime
37.             : null;
38.         // 如果当前行的name与上一行相同，隐藏该单元格
39.         if (currentName === previousName) {
40.           return { rowspan: 0, colspan: 0 };
41.         }
42.         // 如果当前行的name与下一行相同，合并行
43.         let rowspan = 1;
44.         while (nextName === currentName) {
45.           rowspan++;
46.           rowIndex++;
47.           nextName =
48.             rowIndex < item.disposesList.length - 1
49.               ? item.disposesList[rowIndex + 1].updateTime
50.               : null;
51.         }
52.         return { rowspan, colspan: 1 };
53.       }
54.     },
55. },

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。