element-ui的table跨行合并

• 效果图

• 代码

    <template><el-container class="car-head"><el-header height="auto"><el-form :inline="true":model="formObj"@submit.native.preventlabel-width="120px"class="demo-form-inline"><el-form-item label="关键字："prop=""><el-input placeholder="请输入"clearable@keyup.enter.native="onSearch"v-model="formObj.keyWord"></el-input></el-form-item><el-form-item label=" "><el-button @click="onSearch">查询</el-button></el-form-item></el-form></el-header><el-main class="car-box"><el-table :data="tableData"borderheight="100%"v-loading="loading"element-loading-text="努力加载中"element-loading-spinner="el-icon-loading"element-loading-background="rgba(0, 0, 0, 0.8)"highlight-current-rowrow-key="id"ref="multipleTable":span-method="handleSpanMethod":cell-style="{fontSize:'12px',color:'#171a1d'}":header-cell-style="{background:'#f7f8fa',color:'#171a1d',fontSize:'14px'}"style="width: 100%"><el-table-column prop="field_m7ejanne"align="center"label="宿舍所属区域"></el-table-column><el-table-column prop="field_lkzlykrr"align="center"label="宿舍名称"></el-table-column><el-table-column prop="field_lkzlykrt"align="center"label="宿舍地址"></el-table-column><el-table-column prop="field_lkzlykrv"align="center"label="房间号"></el-table-column><el-table-column prop="field_lkzlyksb"align="center"label="房间规格"></el-table-column><el-table-column prop="field_lkzmzcfc"align="center"label="剩余可住人数"></el-table-column><el-table-column prop="field_lkznbefl"align="center"label="姓名"></el-table-column><el-table-column prop="field_lkzlyks9"align="center"label="性别"></el-table-column><el-table-column prop="field_lkzlyks3"align="center"label="部门"></el-table-column><el-table-column prop="field_lkznfbu1"align="center"label="入住时间"><template #default="{row,column}"><div>{{ row[column.property]?$moment(row[column.property]).format("YYYY-MM-DD"):"" }}</div></template></el-table-column><el-table-column prop="field_lkznfbtz"align="center"label="搬离时间"><template #default="{row,column}"><div>{{ row[column.property]?$moment(row[column.property]).format("YYYY-MM-DD"):"" }}</div></template></el-table-column></el-table></el-main><el-footer height="auto"class="text-center"><el-pagination :current-page.sync="form.pageIndex"@size-change="handleSizeChange"@current-change="handleCurrentChange":page-size="form.pageSize":page-sizes="[20, 40, 60, 80,100]"layout="total, sizes, prev, pager, next, jumper":total="form.boskTotal"></el-pagination></el-footer></el-container></template><script lang="ts">import { Component, Vue } from "vue-property-decorator";@Component({name: "",components: {},})export default class extends Vue {ShowSearch = true;form = {pageIndex: 1,pageSize: 20,boskTotal: 0,};formObj = {keyWord: "",};isSearch = {keyWord: "",};$refs: {multipleTable;};tableData = [{field_m7ejanne: "诸暨",field_lkzlykrr: "cs宿舍",field_lkzlykrt: "绍兴市暨阳街道上城y幢",field_lkzlykrv: "20403",field_lkzlyksb: "2人间",field_lkzmzcfc: "2人",field_lkznbefl: "张三",field_lkzlyks9: "女",field_lkzlyks3: "肉肉大米（万风新天地店）",field_lkznfbu1: "20251010",field_lkznfbtz: "20251121",},{field_m7ejanne: "诸暨",field_lkzlykrr: "cs宿舍",field_lkzlykrt: "绍兴市暨阳街道上城y幢",field_lkzlykrv: "20403",field_lkzlyksb: "2人间",field_lkzmzcfc: "2人",field_lkznbefl: "李四",field_lkzlyks9: "女",field_lkzlyks3: "肉肉大米（万风新天地店）",field_lkznfbu1: "20251010",field_lkznfbtz: null,},{field_m7ejanne: "诸暨",field_lkzlykrr: "测试宿舍",field_lkzlykrt: "绍兴市暨阳街道上城x幢",field_lkzlykrv: "11304",field_lkzlyksb: "3人间",field_lkzmzcfc: "1人",field_lkznbefl: "王五",field_lkzlyks9: "男",field_lkzlyks3: "肉肉大米（万风新天地店）",field_lkznfbu1: "20251010",field_lkznfbtz: null,},{field_m7ejanne: "诸暨",field_lkzlykrr: "测试宿舍",field_lkzlykrt: "绍兴市暨阳街道上城x幢",field_lkzlykrv: "11304",field_lkzlyksb: "3人间",field_lkzmzcfc: "1人",field_lkznbefl: "雷六",field_lkzlyks9: "男",field_lkzlyks3: "肉肉大米（万风新天地店）",field_lkznfbu1: "20251010",field_lkznfbtz: null,},{field_m7ejanne: "诸暨",field_lkzlykrr: "测试宿舍",field_lkzlykrt: "绍兴市暨阳街道上城x幢",field_lkzlykrv: "11304",field_lkzlyksb: "3人间",field_lkzmzcfc: "1人",field_lkznbefl: "马七",field_lkzlyks9: "男",field_lkzlyks3: "肉肉大米（万风新天地店）",field_lkznfbu1: "20251010",field_lkznfbtz: null,},{field_m7ejanne: "东莞",field_lkzlykrr: "哈哈哈宿舍",field_lkzlykrt: "东莞市东城区xx期",field_lkzlykrv: "B1215",field_lkzlyksb: "4人间",field_lkzmzcfc: "1人",field_lkznbefl: "杨八",field_lkzlyks9: "男",field_lkzlyks3: "肉肉大米（松山湖万象汇店）",field_lkznfbu1: "20240925",field_lkznfbtz: "20241227",},{field_m7ejanne: "东莞",field_lkzlykrr: "哈哈哈宿舍",field_lkzlykrt: "东莞市东城区xx期",field_lkzlykrv: "B1215",field_lkzlyksb: "4人间",field_lkzmzcfc: "1人",field_lkznbefl: "测试",field_lkzlyks9: "男",field_lkzlyks3: "肉肉大米（松山湖万象汇店）",field_lkznfbu1: "20240925",field_lkznfbtz: "20241126",},{field_m7ejanne: "东莞",field_lkzlykrr: "哈哈哈宿舍",field_lkzlykrt: "东莞市东城区xx期",field_lkzlykrv: "B1215",field_lkzlyksb: "4人间",field_lkzmzcfc: "1人",field_lkznbefl: "随机",field_lkzlyks9: "男",field_lkzlyks3: "肉肉大米（民盈国贸城店）",field_lkznfbu1: "20240928",field_lkznfbtz: "20250630",},{field_m7ejanne: "东莞",field_lkzlykrr: "哈哈哈宿舍",field_lkzlykrt: "东莞市东城区xx期",field_lkzlykrv: "B1215",field_lkzlyksb: "4人间",field_lkzmzcfc: "1人",field_lkznbefl: "名称",field_lkzlyks9: "男",field_lkzlyks3: "肉肉大米（民盈国贸城店）",field_lkznfbu1: "20250702",field_lkznfbtz: null,},{field_m7ejanne: "台州",field_lkzlykrr: "嘿嘿宿舍",field_lkzlykrt: "浙江省台州市xx",field_lkzlykrv: "415",field_lkzlyksb: "1人间",field_lkzmzcfc: "0人",field_lkznbefl: "哈哈",field_lkzlyks9: "女",field_lkzlyks3: "肉肉大米（中盛城市广场店）",field_lkznfbu1: "20251008",field_lkznfbtz: null,},]; // 表格数据loading = false;spanArr = []; // 存储每一行的合并规则position = 0; // 辅助计算合并位置的临时变量spanList = []; // 存储每一行的合并规则tmpIndex = 0; // 辅助计算合并位置的临时变量created() {// this.InitLoad();}mounted() {this.calculateSpan();this.calculateSpan1();}// 预计算合并规则calculateSpan() {this.spanArr = []; // 重置合并规则this.position = 0; // 重置位置指针if (this.tableData.length === 0) {return;}// 从第一行开始遍历this.spanArr.push(1); // 第一行默认合并行数为1for (let i = 1; i < this.tableData.length; i++) {// 获取当前行和上一行的关键标识（用于判断是否需要合并）const currentKey = this.getRowKey(this.tableData[i]);const prevKey = this.getRowKey(this.tableData[i - 1]);if (currentKey === prevKey) {// 若当前行与上一行标识相同，合并行数+1，当前行合并行数设为0（隐藏）this.spanArr[this.position] += 1;this.spanArr.push(0);} else {// 若不同，重置位置指针，当前行合并行数设为1this.position = i;this.spanArr.push(1);}}// console.log(this.spanArr);}calculateSpan1() {this.spanList = []; // 重置合并规则this.tmpIndex = 0; // 重置位置指针if (this.tableData.length === 0) {return;}// 从第一行开始遍历this.spanList.push(1); // 第一行默认合并行数为1for (let i = 1; i < this.tableData.length; i++) {// 获取当前行和上一行的关键标识（用于判断是否需要合并）const currentKey = this.getRowKey1(this.tableData[i]);const prevKey = this.getRowKey1(this.tableData[i - 1]);if (currentKey === prevKey) {// 若当前行与上一行标识相同，合并行数+1，当前行合并行数设为0（隐藏）this.spanList[this.tmpIndex] += 1;this.spanList.push(0);} else {// 若不同，重置位置指针，当前行合并行数设为1this.tmpIndex = i;this.spanList.push(1);}}console.log(this.spanList);}// 生成行的唯一标识（合并的判断依据）getRowKey(row) {// 合并的核心字段：宿舍所属区域+宿舍名称+宿舍地址+房间号+房间规格+剩余可住人数return [row.field_m7ejanne, // 宿舍所属区域row.field_lkzlykrr, // 宿舍名称// row.field_lkzlykrt, // 宿舍地址// row.field_lkzlykrv, // 房间号// row.field_lkzlyksb, // 房间规格// row.field_lkzmzcfc, // 剩余可住人数].join("|"); // 用特殊符号拼接，避免字段值本身包含分隔符导致误判}getRowKey1(row) {// 合并的核心字段：宿舍地址+房间号+房间规格+剩余可住人数return [row.field_lkzlykrt, // 宿舍地址row.field_lkzlykrv, // 房间号row.field_lkzlyksb, // 房间规格row.field_lkzmzcfc, // 剩余可住人数].join("|"); // 用特殊符号拼接，避免字段值本身包含分隔符导致误判}// 表格合并方法（核心）handleSpanMethod({ row, column, rowIndex, columnIndex }) {// 只处理前6列（索引0-5），其他列不合并if (columnIndex < 6) {if (columnIndex < 2) {const rowspan = this.spanArr[rowIndex];const colspan = rowspan > 0 ? 1 : 0; // 合并行时列占比为1，0则隐藏return { rowspan, colspan };} else if (columnIndex > 1 && columnIndex < 6) {const rowspan = this.spanList[rowIndex];const colspan = rowspan > 0 ? 1 : 0; // 合并行时列占比为1，0则隐藏return { rowspan, colspan };}}// 不需要合并的列返回默认值（不合并）return { rowspan: 1, colspan: 1 };}/** 初始化数据 */InitLoad() {}/** 搜索 */onSearch() {this.isSearch = this.formObj;this.form.pageIndex = 1;this.InitLoad();}handleSizeChange(val) {this.form.pageSize = val;this.InitLoad();}handleCurrentChange(val) {this.form.pageIndex = val;this.InitLoad();}}</script><style lang="scss" scoped>.car-head {background: #fff;width: 100%;height: 100%;.car-box {background: #fff;}}</style>