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
        }
      }
    });

  });
相关推荐
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理7 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
Liudef069 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端10 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder11 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句11 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom11 小时前
JavaScript reduce()函数详解
javascript
小飞悟11 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子11 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript