elementUI表格合并单元格
相信你肯定看了 ElementUI 官方文档了,没看的话先去看下表格各个属性的意义,方便下文阅读:传送门
但你会发现此例过于简单,死数据,但我们开发的时候往往都是后台传递过来的数据,导致我们 rowspan 的参数需要自己做判断,根据数据的相同行(或列)进行合并;
我们先看下结果:
代码附上:
<template><div class=""><el-table:data="listData":span-method="objectSpanMethod"class="tableArea"style="width: 100%"><el-table-columnprop="type"label="序号"align="center"width="200"/><el-table-columnprop="sheetType"label="工单类型"/><el-table-columnprop="taskKey"label="taskKey"/><el-table-columnprop="templateUrl"label="templateUrl"/><el-table-columnlabel="操作"><template slot-scope="scope"><el-tooltip class="item" effect="dark" content="修改" placement="top-start"><i class="el-icon-edit-outline" @click="modify(scope)" /></el-tooltip><el-tooltip class="item" effect="dark" content="删除" placement="top-start"><i class="el-icon-delete" @click="deleteData(scope)" /></el-tooltip></template></el-table-column ></el-table></div>
</template>
<script>export default {name: 'myNeedDeal',data() {return {rowList: [],spanArr: [],position: 0,listData: []}},methods: {queryData(){//查询操作this.listData = [{id:1,type:1,sheetType: "事件单",taskKey: "shijian_01",templateUrl: "/shijian_01"},{id:2,type:1,sheetType: "事件单",taskKey: "shijian_02",templateUrl: "/shijian_02"},{id:3,type:1,sheetType: "事件单",taskKey: "shijian_03",templateUrl: "/shijian_04"},{id:4,type:2,sheetType: "问题单",taskKey: "wenti_01",templateUrl: "/wenti_01"},{id:5,type:2,sheetType: "问题单",taskKey: "wenti_02",templateUrl: "/wenti_02"},{id:6,type:2,sheetType: "问题单",taskKey: "wenti_03",templateUrl: "/wenti_03"}];this.rowspan()},rowspan() {this.listData.forEach((item,index) => {if( index === 0){this.spanArr.push(1);this.position = 0;}else{if(this.listData[index].type === this.listData[index-1].type ){this.spanArr[this.position] += 1;this.spanArr.push(0);}else{this.spanArr.push(1);this.position = index;}}})},objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行if (columnIndex === 0) {const _row = this.spanArr[rowIndex];const _col = _row>0 ? 1 : 0;return {rowspan: _row,colspan: _col}}if(columnIndex === 1){const _row = this.spanArr[rowIndex];const _col = _row>0 ? 1 : 0;return {rowspan: _row,colspan: _col}}}},mounted() {this.queryData();}
}
</script>
<style lang="scss" scoped>
.el-select {margin-right: 15px;
}
.el-input {margin-right: 15px;width: 200px;
}
.tableArea {margin-top: 20px;box-shadow: 0 0 8px 0 #aaa;
}
i[class^="el-icon"] {margin-right: 5px;font-size: 16px;cursor: pointer;
}
.modify_table{td{padding: 10px ;}
}
.item_title{text-align: right;
}
</style>
详细说明:
:span-method="objectSpanMethod"
这个是官方给定的绑定属性和对应的方法,objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
row: 当前行
column: 当前列
rowIndex:当前行号
columnIndex :当前列号
该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。
this.spanArr 数组 ,返回的是相对应的行合并行数
这个示例打印出的this.spanArr为 [3, 0, 0, 3, 0, 0],比如,第一个元素为3,表示第一行应该向下合并3行(即第一行的rowspan为3),第二个元素的rowspan为0,就让它“消失”。
rowspan()这个函数就是用来返回 this.spanArr 数组的,定义每一行的 rowspan
rowspan()函数,if( index === 0),第一行,直接先给数组push进一个1,表示自己先占一行,this.position是数组元素的位置(此时是从数组元素的第一个开始,所以this.position为0), this.position为0意思表示的就是数组的第一个元素。
当到了index为2的时候,if(this.listData[index].type === this.listData[index-1].type ),让第二行与第一行作比较,
如果第二行与第一行相等的话,this.position就+1,当有n行第一行相同,this.position就为n,表示向下合并n行;第二行自己就this.spanArr.push(0),表示第二行“消失”,因为第一行和第二行合并了啊。
如果第二行与第一行不相等的话,那么this.spanArr.push(1);就让第二行自己独占一行;this.position = index意思就是把指针拿到index这行来,表示设置数组this.spanArr[this.position]的元素值,然后定义从此行开始向下合并几行(可能这句话我表述的不是很清楚你可以根据我这个示例研究下,当index为3时,this.position为3,当index为4时,第四行与第三行需要合并,那么在数组的this.position元素就要+1了,也就是this.spanArr[this.position] += 1)
还有最后一句话
const _col = _row>0 ? 1 : 0;
定义的这一个单元格列的合并,我们项目只合并行,不合并列;
_row:代表合并行的行数,_row的值要么是1,或者更大的自然正整数,要么是0。
1代表:独占一行
更大的自然数:代表合并了若干行
0:代表“消失”的哪那一个单元格,后面的单元格向前推一格
表述能力有限,若有错误或者问题,欢迎下方留言!
觉得不错,欢迎点赞!
elementUI表格合并单元格相关推荐
- elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行 需求:使用vue + elementUI 实现如下表格: 省份 城市 区域 人口 贵州 遵义 汇川区 100 红花岗区 100 播州区 100 贵阳 ...
- elementUI表格----合并单元格
直接复制到文件中,看看就能明白怎么用 原文地址: https://blog.csdn.net/qq_14993591/article/details/124048897 <template> ...
- 记一次用iview实现表格合并单元格的具体操作
记一次用iview实现表格"合并"单元格的具体操作 最近做项目使用iview框架做后台管理系统,第一次使用iview遇到过很多问题,有些小坑也都在网上找到解决方案了,可作为一个通用 ...
- ElementUI el-table合并单元格
VUE项目中经常遇到table表格合并单元格的需求,el-table组件支持自定义单元格合并(:span-method="objectSpanMethod"),即将某一属性值相同的 ...
- html在线编辑器合并单元格,Bootstrap实现的表格合并单元格示例
本文实例讲述了Bootstrap实现的表格合并单元格.分享给大家供大家参考,具体如下: 1.问题背景 利用Bootstrap设计表格,并且表格需要合并单元格 2.实现源码 Bootstrap-表格合并 ...
- layui实现表格合并单元格,设置不同背景色
最近在使用layui的过程中,遇到了表格合并单元格,设置不同背景色的问题. 在此总结,大家一起学习. 同一组新闻的底色相同,效果如下: 实现代码: <script>layui.config ...
- 【markdown】表格合并单元格
[markdown]表格合并单元格 DEMO DEMO 效果 参考链接 :[markdown]表格合并单元格 DEMO <table><tr><th>属性</ ...
- jquery操作表格 合并单元格
$('#table_2').mergeCell({cols: [7,8,9] ///参数为要合并的列,例如[0,5],表示第0和第5列});/** * 操作表格 合并单元格 行 * 2016年12月1 ...
- 使用POI创建word表格合并单元格兼容wps
poi创建word表格合并单元格代码如下: /** * @Description: 跨列合并 */ public void mergeCellsHorizontal(XWPFTable table, ...
最新文章
- T400 安装Windows 7 7100 总结
- python celery多worker、多队列、定时任务
- mysql 导入主键冲突_MySQL 处理插入过程中的主键唯一键重复值的解决方法
- 小米miuiVS华为鸿蒙,华为鸿蒙2.0 vs 小米MIUI 12.5
- 三年亏了近50亿,网易云音乐终于熬到上市了
- 北京移动联合中兴通讯率先完成SON 4/5G全制式规模部署
- Linux基础学习(5)
- IntelliJ中可能的东西在Eclipse中是不可能的?
- VS 和 Eclipse 的一些快捷键记录
- 文件管理系统源码_【程序源代码】人力资源管理系统
- oracle-Mount
- spring mvc 页面跳转 携带数据的两种方式
- PHP正则获取HTML里需要的数据
- java后端 解决app接口版本管理问题
- WEB前端开发学习5大网站,你用过几个?
- android 旋转木马菜单,AndroidCarrouselLayout
- UVa 10141 - Request for Proposal
- ORAN C平面传输和基本功能
- ad19电气规则检查_AD19中PCB设计常用规则-电气规则设置
- 数据可视化如何实现?4大基本流程了解一下
热门文章
- linux 无法实例化类,linux – 有没有办法将两个实例化的systemd服务作为一个单元进行控制?...
- 谷歌地球out了,谷歌火星来了!
- Jenkins邮箱配置中,使用SSL连接的问题
- 这就涉及到ABAQUS历史输出中各能量变量的意义
- pandas计算方差,平均值,分位数,中位数
- html+css学习第六天(背景图片、精灵图片、元素内容溢出、长度单位)
- [读书笔记]自控力内容整理
- Qt quick 示例:推特搜索小程序开发
- FFmpeg分离(解封装)视频和音频
- 4-1 Aruba Central 云管理解决方案