VUE element table 列合并

VUE element table 列合并

效果

关键位置代码

table位置

复制代码
<el-table v-loading="loading" :data="dataList" row-key="id" max-height="760" :span-method="handleSpanMethod">
	<el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
	<el-table-column prop="batchNo" label="入库批次"></el-table-column>
	<el-table-column prop="deviceName" label="名称"></el-table-column>
	......
</el-table>

javascript

复制代码
const dataList = ref([]);
const spanArr = ref([]);

// 自定义合并单元格的方法
function handleSpanMethod({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 1) { // batchNo列的索引
    const rowspan = spanArr.value[rowIndex]
    const colspan = rowspan > 0 ? 1 : 0
    return {
      rowspan,
      colspan
    }
  }
}

组装数据时
listDeviceFlowRk2(queryParams.value).then(res => {
    dataList.value = res.data.list;
    total.value = res.data.total;

    spanArr.value = []
    let pos = 0
    dataList.value.forEach((item, index) => {
      if (index === 0) {
        spanArr.value.push(1)
        pos = 0
      } else {
        if (dataList.value[index].batchNo === dataList.value[index - 1].batchNo) {
          spanArr.value[pos] += 1
          spanArr.value.push(0)
        } else {
          spanArr.value.push(1)
          pos = index
        }
      }
    });

  });
相关推荐
云边散步1 小时前
《校园生活平台从 0 到 1 的搭建》第四篇:微信授权登录前端
前端·javascript·后端
讨厌吃蛋黄酥1 小时前
React样式冲突终结者:CSS模块化+Vite全链路实战指南🔥
前端·javascript·react.js
星眠1 小时前
学习低代码编辑器第四天
javascript·面试
Hilaku1 小时前
原生<dialog>元素:别再自己手写Modal弹窗了!
前端·javascript·html
GISer_Jing2 小时前
Coze:字节跳动AI开发平台功能和架构解析
javascript·人工智能·架构·开源
AndyGoWei2 小时前
Web Worker 简单使用,看这篇文章就够了
javascript
OEC小胖胖2 小时前
组件化(一):重新思考“组件”:状态、视图和逻辑的“最佳”分离实践
前端·javascript·html5·web
拾光拾趣录2 小时前
用 Web Worker 计算大视频文件 Hash:从“页面卡死”到流畅上传
前端·javascript
索西引擎3 小时前
HTML5 新特性:MutationObserver 详解
javascript
洛千陨3 小时前
Web Worker基础概念 & 图片滤镜处理实际应用 -- Vue3
javascript·vue.js