当前位置：首页 > news >正文

VUE element table 列合并

news 来源：原创 2025/6/12 21:06:00

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 : 0return {rowspan,colspan}}
}组装数据时
listDeviceFlowRk2(queryParams.value).then(res => {dataList.value = res.data.list;total.value = res.data.total;spanArr.value = []let pos = 0dataList.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] += 1spanArr.value.push(0)} else {spanArr.value.push(1)pos = index}}});});