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

合并table

news 来源：原创 2025/6/24 9:09:47

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>玻璃样品检测数据表</title><link rel="stylesheet" href="./vue/element_ui.css" /><link rel="stylesheet" href="./css/index.css" /><script src="./vue/unocss.js"></script><script src="./vue/vue.js"></script><script src="./vue/element_ui.js"></script><style>.el-table .warning-row {background: #fdf6ec;}.el-table .success-row {background: #f0f9eb;}.el-table__header th {background-color: #f5f7fa !important;color: #606266;font-weight: bold;}.position-cell {font-weight: bold;color: #409eff;}.summary-cell {font-weight: bold;color: #303133;background-color: #f5f7fa;}</style></head><body><div id="app"><div class="p-20px"><el-table:data="tableData":span-method="objectSpanMethod"borderstripe><!-- 产线列 --><el-table-column prop="locLine" label="产线" align="center"></el-table-column><!-- 厚度列 --><el-table-column prop="thickness" label="厚度" align="center"><template #default="{row}"> {{ row.thickness }}mm </template></el-table-column><!-- 位置列 --><el-table-column prop="location" label="位置" align="center"></el-table-column><!-- 锡计数列 --><el-table-column prop="measureSnNum" label="锡计数" align="center"><template #default="{row}"><el-tooltip :content="row.ceshi" placement="top"><div>{{ row.measureSnNum }}</div></el-tooltip></template></el-table-column></el-table></div></div><script>new Vue({el: "#app",data() {return {tableData: [],};},created() {// 初始化表格数据this.initTableData();},methods: {// 初始化表格数据initTableData() {const rawData = [// A线数据{locLine: "A线",thickness: 2.5,location: "前端",measureSnNum: 15,ceshi: 1,},{locLine: "A线",thickness: 2.5,location: "前端",measureSnNum: 15,ceshi: 2,},{locLine: "A线",thickness: 2,location: "前端",measureSnNum: 18,ceshi: 3,},{locLine: "A线",thickness: 2.5,location: "中端",measureSnNum: 22,ceshi: 4,},{locLine: "A线",thickness: 3.0,location: "前端",measureSnNum: 16,ceshi: 5,},{locLine: "A线",thickness: 3.0,location: "前端",measureSnNum: 19,ceshi: 6,},// B线数据{locLine: "B线",thickness: 3,location: "前端",measureSnNum: 14,ceshi: 7,},{locLine: "B线",thickness: 2.0,location: "前端",measureSnNum: 17,ceshi: 8,},{locLine: "B线",thickness: 2.0,location: "前端",measureSnNum: 13,ceshi: 9,},{locLine: "B线",thickness: 2.0,location: "中端",measureSnNum: 21,ceshi: 10,},{locLine: "B线",thickness: 2.5,location: "后端",measureSnNum: 25,ceshi: 11,},{locLine: "B线",thickness: 2.5,location: "后端",measureSnNum: 28,ceshi: 12,},];// 处理数据，添加合并信息this.tableData = this.processDataForMerge(rawData);},// 处理数据，为合并做准备processDataForMerge(data) {const processedData = [];for (let i = 0; i < data.length; i++) {const currentRow = { ...data[i] };// 初始化合并标记currentRow.locLineFirst = false;currentRow.thicknessFirst = false;currentRow.locationFirst = false;// 检查是否是产线的第一行if (i === 0 || data[i - 1].locLine !== currentRow.locLine) {currentRow.locLineFirst = true;// 计算产线合并行数let count = 1;for (let j = i + 1; j < data.length; j++) {if (data[j].locLine === currentRow.locLine) {count++;} else {break;}}currentRow.locLineSpan = count;}// 检查是否是厚度的第一行if (i === 0 ||data[i - 1].locLine !== currentRow.locLine ||data[i - 1].thickness !== currentRow.thickness) {currentRow.thicknessFirst = true;// 计算厚度合并行数let count = 1;for (let j = i + 1; j < data.length; j++) {if (data[j].locLine === currentRow.locLine &&data[j].thickness === currentRow.thickness) {count++;} else {break;}}currentRow.thicknessSpan = count;}// 检查是否是位置的第一行if (i === 0 ||data[i - 1].locLine !== currentRow.locLine ||data[i - 1].thickness !== currentRow.thickness ||data[i - 1].location !== currentRow.location) {currentRow.locationFirst = true;// 计算位置合并行数let count = 1;for (let j = i + 1; j < data.length; j++) {if (data[j].locLine === currentRow.locLine &&data[j].thickness === currentRow.thickness &&data[j].location === currentRow.location) {count++;} else {break;}}currentRow.locationSpan = count;}processedData.push(currentRow);}return processedData;},// 合并单元格方法objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {// 产线列if (row.locLineFirst) {return {rowspan: row.locLineSpan,colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}} else if (columnIndex === 1) {// 厚度列if (row.thicknessFirst) {return {rowspan: row.thicknessSpan,colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}} else if (columnIndex === 2) {// 位置列if (row.locationFirst) {return {rowspan: row.locationSpan,colspan: 1,};} else {return {rowspan: 0,colspan: 0,};}}},},});</script></body>
</html>