vue 中 elment-ui table合并上下两行相同数据单元格


Posted in Javascript onDecember 26, 2019

html :

<el-table
 :header-cell-style="{background:'#6d7f93',color:'white'}"
 :data="ptableDate"
 align="center"
 border
 v-loading="loading"
 :height="tableHeight"
 :span-method="objectOneMethod"
 >
 <el-table-column align="center" show-overflow-tooltip prop="projName" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="dirtySection" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="towerNumber" ></el-table-column>
 <el-table-column align="center" show-overflow-tooltip prop="inclination" ></el-table-column>
 </el-table>

method

objectOneMethod({ row, column, rowIndex, columnIndex }) {
 if (columnIndex === 0) {
 const _row = this.setTable(this.ptableDate).one[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
 rowspan: _row,
 colspan: _col
 };
 }
 if (columnIndex === 1 ) {
 const _row = this.setTable(this.ptableDate).two[rowIndex];
 const _col = _row > 0 ? 1 : 0;
 return {
 rowspan: _row,
 colspan: _col
 };
 }
 },
 setTable(tableData) {
 let spanOneArr = [],
 spanTwoArr = [],
 concatOne = 0,
 concatTwo = 0;
 tableData.forEach((item, index) => {
 if (index === 0) {
 spanOneArr.push(1);
 spanTwoArr.push(1);
 } else {
 if (item.projName === tableData[index - 1].projName) {
 //第一列需合并相同内容的判断条件
 spanOneArr[concatOne] += 1;
 spanOneArr.push(0);
 } else {
 spanOneArr.push(1);
 concatOne = index;
 }
 if (item.dirtySection === tableData[index - 1].dirtySection) {
 //第二列和需合并相同内容的判断条件
 spanTwoArr[concatTwo] += 1;
 spanTwoArr.push(0);
 } else {
 spanTwoArr.push(1);
 concatTwo = index;
 }
 }
 });
 return {
 one: spanOneArr,
 two: spanTwoArr
 };
 },

ps:下面看下ELEMENT-UI 合并单元格的方法

arraySpanMethod({ row, column, rowIndex, columnIndex }) {
// 只合并区域位置
  //columnIndex 横的第一列
  //rowIndex 竖的数组的length % 3 ==0 合并单元格
 if (columnIndex === 0) { //如果是第一行
if (rowIndex % 3 === 0) {//如果是 数组长度 % 3 ==0
return {
rowspan: 3,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},

vue 中 elment-ui table合并上下两行相同数据单元格

总结

以上所述是小编给大家介绍的vue 中 elment-ui table合并上下两行相同数据单元格,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
限制复选框的最大可选数
Jul 01 Javascript
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
Dec 11 Javascript
JavaScript原型继承之基础机制分析
Aug 26 Javascript
给ListBox添加双击事件示例代码
Dec 02 Javascript
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
Jun 06 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 #Javascript
node.js Promise对象的使用方法实例分析
Dec 26 #Javascript
js回调函数仿360开机
Dec 26 #Javascript
js仿360开机效果
Dec 26 #Javascript
element-ui中按需引入的实现
Dec 25 #Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 #Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
You might like
PHP生成月历代码
2007/06/14 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
js 遍历对象的属性的代码
2011/12/29 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
详解AngularJS中ng-src指令的使用
2016/09/07 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
javascript垃圾收集机制的原理分析
2016/12/08 Javascript
详解Vue中使用Echarts的两种方式
2018/07/03 Javascript
vue-cli 3.x 修改dist路径的方法
2018/09/19 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
[01:56]无止竞 再出发——中国军团出征2017年DOTA2国际邀请赛
2017/07/05 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python3处理HTTP请求的实例
2018/05/10 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
对python opencv 添加文字 cv2.putText 的各参数介绍
2018/12/05 Python
Python 获取 datax 执行结果保存到数据库的方法
2019/07/11 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
python logging通过json文件配置的步骤
2020/04/27 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
英国儿童设计师服装和玩具购物网站:Zac & Lulu
2020/10/19 全球购物
在校生党员自我评价
2013/09/25 职场文书
旅游与酒店管理的自我评价分享
2013/11/03 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python