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

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

后端返回的数据格式:

html:

html 复制代码
<el-tab-pane label="执行记录概览" name="fourth" v-loading="loading">
          <el-timeline v-if="recordList.length > 0">
            <el-timeline-item
              v-for="(item, index) in recordList"
              :key="index"
              :timestamp="item.createTime"
              placement="top"
            >
              <el-card>
                <el-tabs
                  v-model="activeName2[index]"
                  @tab-click="handleClick2($event, index)"
                >
                  <el-tab-pane label="阻断列表" name="first">
                    <el-table
                      :data="item.disposesList"
                      :span-method="(params) => objectSpanMethod(params, item)"
                      border
                    >
                      <!-- <el-table-column
                        align="center"
                        type="index"
                        label="序号"
                      /> -->
                      <el-table-column
                        prop="updateTime"
                        label="时间"
                        width="160"
                      >
                      </el-table-column>
                      <el-table-column prop="hostnameIp" label="域名/IP">
                      </el-table-column>
                      <!-- <el-table-column prop="type" label="阻断状态" width="100">
                        <template slot-scope="scope">
                          <span>{{ getBlockState(scope.row.blockState) }}</span>
                        </template>
                      </el-table-column> -->
                      <el-table-column prop="type" label="类型" width="100">
                        <template slot-scope="scope">
                          <span>{{ getTypelVal(scope.row.type) }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column prop="label" label="标签" width="120">
                        <template slot-scope="scope">
                          <span>{{ getLabelVal(scope.row.label) }}</span>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                  <el-tab-pane label="快照截图" name="second">
                    <Snapshot :snapshotList="item.snapshotList"></Snapshot>
                  </el-tab-pane>
                  <el-tab-pane label="通信流量" name="third">
                    <Traffic :networkList="item.networkList"></Traffic>
                  </el-tab-pane>
                </el-tabs>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <div v-if="!recordList.length" class="nodata">
            <img class="empty-pic" src="@/assets/images/nodata.png" alt="" />
          </div>
        </el-tab-pane>

js:

javascript 复制代码
 data() {
    return {
         recordList: [],
          activeName2: {}, // 用一个对象来存储每个tab的激活状态
    }
 }

methods: {
handleClick2(tab, index) {
      this.$set(this.activeName2, index, tab.name);
 },
getAllList() {
      this.loading = true;
      getAllList({
        taskId: this.taskId,
      }).then((response) => {
        this.recordList = response.rows;
        this.loading = false;

        // 初始化activeTab对象
        this.recordList.forEach((item, index) => {
          this.$set(this.activeName2, index, "first"); // 假设默认第一个面板是激活的
        });
      });
  },
objectSpanMethod({ row, column, rowIndex, columnIndex }, item) {
      // console.log(row, column, rowIndex, columnIndex);
      if (columnIndex === 0) {
        // name列
        // 获取当前行的name值
        let currentName = row.updateTime;
        let previousName =
          rowIndex > 0 ? item.disposesList[rowIndex - 1].updateTime : null;
        let nextName =
          rowIndex < item.disposesList.length - 1
            ? item.disposesList[rowIndex + 1].updateTime
            : null;
        // 如果当前行的name与上一行相同,隐藏该单元格
        if (currentName === previousName) {
          return { rowspan: 0, colspan: 0 };
        }
        // 如果当前行的name与下一行相同,合并行
        let rowspan = 1;
        while (nextName === currentName) {
          rowspan++;
          rowIndex++;
          nextName =
            rowIndex < item.disposesList.length - 1
              ? item.disposesList[rowIndex + 1].updateTime
              : null;
        }
        return { rowspan, colspan: 1 };
      }
    },
},
相关推荐
天天扭码1 分钟前
2025年了,npm 与 pnpm我们该如何选择
前端·javascript·npm
烛阴3 分钟前
10个JavaScript编程技巧,助你成为高效开发高手!
前端·javascript
sen_shan18 分钟前
Vue3+Vite+TypeScript+Element Plus开发-23.客制Form组件
vue.js
s91236010120 分钟前
rust REGEX和lazy_static 和struct 混用
java·前端·javascript
vvilkim38 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
天天扭码42 分钟前
在项目中常见的main.js和main.mjs有什么区别,我们该如何选择?
前端·javascript·面试
三巧2 小时前
纯CSS吃豆人(JS仅控制进度)
javascript·css·html
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS+js美甲店网页设计(5页)附源码
javascript·css·html
天天扭码2 小时前
从数组到对象:JavaScript 遍历语法全解析(ES5 到 ES6 + 超详细指南)
前端·javascript·面试
拉不动的猪2 小时前
前端开发中常见的数据结构优化问题
前端·javascript·面试