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 相关文章推荐
用JavaScript编写COM组件的步骤
Mar 17 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
extjs表格文本启用选择复制功能具体实现
Oct 11 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
Dec 14 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
destoon官方标签大全
2014/06/20 PHP
php数据访问之查询关键字
2016/05/09 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
2013/04/08 Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
2013/06/27 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
JS实现图片拖拽交换效果
2018/11/30 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
JS实现轮播图效果
2020/01/11 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
在Python中使用SQLite的简单教程
2015/04/29 Python
python实现代码统计程序
2019/09/19 Python
Python调用Windows命令打印文件
2020/02/07 Python
python如何快速生成时间戳
2020/07/21 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
Julep官网:美容产品和指甲油
2017/02/25 全球购物
阿联酋航空官方网站:Emirates
2017/10/17 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
信息管理专业自荐书
2014/06/05 职场文书
临床专业自荐信
2014/06/22 职场文书
作风大整顿心得体会
2014/09/10 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
幼师个人总结范文
2015/02/28 职场文书
2015年教师师德师风承诺书
2015/04/28 职场文书
辩护词范文大全
2015/05/21 职场文书
无保留意见审计报告
2015/06/05 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书