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 相关文章推荐
js 弹出新页面避免被浏览器、ad拦截的一种新方法
Apr 30 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery插件实现大图全屏图片相册
Mar 14 Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
新入门node.js必须要知道的概念(必看篇)
Aug 10 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
jQuery Validate验证表单时多个name相同的元素只验证第一个的解决方法
Dec 24 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
利用JavaScript的%做隔行换色的实例
Nov 25 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
基于Zookeeper的使用详解
2013/05/02 PHP
php微信公众平台开发之获取用户基本信息
2015/08/17 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
2015/11/09 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
js创建一个input数组并绑定click事件的方法
2014/06/12 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
p5.js实现动态图形临摹
2019/10/23 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[26:21]浴火之凤-TI4世界冠军Newbee战队纪录片
2014/08/07 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
解读Python中degrees()方法的使用
2015/05/18 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
python 线程的五个状态
2020/09/22 Python
同学会邀请书大全
2014/01/12 职场文书
物流毕业生个人的自我评价
2014/02/13 职场文书
中学生评语大全
2014/04/18 职场文书
竞选班干部的演讲稿
2014/04/24 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
项目安全员岗位职责
2015/02/15 职场文书