element-UI表格table实现表格行的动态合并

davis_23

已于 2022-10-12 16:41:29 修改

阅读量1.3w

点赞数 11

分类专栏： Front-end 文章标签： element-ui vue.js el-table span-method element

于 2018-12-04 11:18:16 首次发布

本文链接：https://blog.csdn.net/davis_23/article/details/84784911

版权

本文主要举个项目中真实实例，方便各位跟我一样在实际项目开发中碰到的需求功能的开发。

饿了么table组件官方实例：http://element-cn.eleme.io/#/zh-CN/component/table，在实际开发过程中，官方实例根本无法满足需求，实际需求一般都是动态的合并而不是固定怎么合并的，所以这时就需要我们对其进行处理。

大致思路就是：先将查询出的列表数据分出哪几列哪几行需要进行合并并且合并多少行或多少列，这些数据记录放进一个空数组中，合并的时候再根据这个数组进行相应的合并。

.vue文件：

<template>
  <section class="search-table">
    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" class="dynamic-table" label-width="0">
      <el-table :data="dynamicValidateForm.domains" :span-method="objectSpanMethod" v-loading.body="listLoading" 
        element-loading-text="拼命加载中" border f