vue element ui合并表格（合并某列的行数据）

需求：按需合并某些列的数据

自定义数据：

tableData:[

{

num:0,

new_subject_name:"new_subject_name1",

count1:"count11",

percentage1:"percentage11",

problems:"problems1",

count2:"count21",

percentage2:"percentage21"

{

num:3,

new_subject_name:"new_subject_name12",

count1:"count112",

percentage1:"percentage112",

problems:"problems12",

count2:"count212",

percentage2:"percentage212"

{

num:1,

new_subject_name:"new_subject_name13",

count1:"count113",

percentage1:"percentage113",

problems:"problems13",

count2:"count213",

percentage2:"percentage213"

{

num:1,

new_subject_name:"new_subject_name14",

count1:"count114",

percentage1:"percentage114",

problems:"problems14",

count2:"count214",

percentage2:"percentage214"

{

num:0,

new_subject_name:"new_subject_name15",

count1:"count115",

percentage1:"percentage115",

problems:"problems15",

count2:"count215",

percentage2:"percentage215"

}

],//table数据集

做法：在table上添加方法，:span-method="objectSpanMethod"

方法objectSpanMethod的写法很重要，例如：

方法objectSpanMethod注意事项1：确定哪些列需要合并

方法objectSpanMethod注意事项2：根据自定义数据num（这个数据可以提前在后端做好）判断要合并几行，比如只合并前1~3行，那么当rowIndex=1时（我这里使用的是自定义num判断）：

因为第二行和第三行是合并的列，当rowIndex=2或rowIndex=3时（这时，第二行和第三行的数据就被第一行的数据覆盖了）：

方法objectSpanMethod注意事项3：因为需要是只合并前三行，所以第四行的数据不需要合并，那么就不能进入这个if条件中，或者不走这个方法。

总结：1.先判断对应的合并列；2.明确规划要合并的哪些列，对需要合并的那几行进行判断和返回不同的rowspan、colspan；3.不需要合并的数据不能进入这个方法，否则，表格显示会出现问题。

注释：这里我采用对row.num的判断来自动合并哪几行数据，当然，可能也有别的方法来自动合并哪几行数据。如果row.num=3,则会从该行往下合并三行，方法返回rowspan：3，colspan：1，接下来的两行中row.num都等于1，方法返回rowspan：0，colspan：0，当row.num=0时，不走该方法，这样就可以根据num自动合并数据。

如果按规律合并数据，比如，每两行每两行的合并数据，那么可以根据element ui官网上的例子：

官网地址：Element - The world's most popular Vue UI framework

vue element ui合并表格（合并某列的行数据）相关推荐

Element ui Table表格匹配字典项中的数据
在工作中通常会遇到Table表格匹配字典项中的数据这里介绍几种方法大家仅供参考 <el-table:data="tableData"style="width: 10 ...
vue表单中批量导入功能_vue实战(11)——vue+element UI实现表格数据导出Excel功能
一.应用场景按照需求导出功能分为勾选批量导出及按照查询结果导出,考虑到接口操作导出的复杂性,因此实现了js控制导出的功能导出功能截图二.安装相关依赖 cnpm install --save xl ...
VUE element ui 动态合并单元格问题
** VUE element ui 动态合并单元格问题** 1.基础方法 //最开始从网上找到了一个基本的可以同时兼顾行和列的方法,时间太久忘记出自哪里了.如下: //效果 //绑定 :span-me ...
element表格攻略大全,表头合并,表格合并,动态添加一列
elementui表格攻略大全,表头合并,表格合并,动态添加一列 element合并表头与合并表格,需求就是这样,数据结构中需要有一个大类集合,由于数据结构是我定的,图二是这个表格的数据结构 [{fu ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
Element UI 中table合并单元格
Element UI组件库合并table单元格函数封装 DOM: <el-table:data="tableData"size="mini"class=& ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
Element UI Table表格样式调整
调整Element UI Table表格的样式最终效果: 单元格合并,样式调整模拟后端返回数据 {teamName: '小组一',outsourceFlag: '是',adminName: '张三 ...
【Vue+Element UI】关闭指定某一个页面的loading动画
[Vue+Element UI]关闭指定某一个页面的loading动画模板:vue-admin-template v4.4.0 问题描述:由于vue-admin默认配置了全局loading,所以页面 ...

vue element ui合并表格（合并某列的行数据）

vue element ui合并表格（合并某列的行数据）相关推荐

最新文章

热门文章