vue单元格多列合并的实现


Posted in Vue.js onNovember 26, 2020

一.多列合并

1.在el-table中添加:span-method="objectSpanMethod"属性来控制合并单元格,如下图

vue单元格多列合并的实现

2.合并代码,每一列都要设置一个不同的key,这样可以防止合并的时候上下内容一样导致错误的问题

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) {
    if (this.myObj[row.channel_type].start === rowIndex) {
     return {
      rowspan: this.myObj[row.channel_type].step,
      colspan: 1
     };
    } else {
     return {
      rowspan: 0,
      colspan: 0
     };
    }
   }
   if (columnIndex === 1) {
    if (
     this.myObj_two[row.channel_name_chinese + row.channel_type].start ===
     rowIndex
    ) {
     return {
      rowspan: this.myObj_two[row.channel_name_chinese + row.channel_type]
       .step,
      colspan: 1
     };
    } else {
     return {
      rowspan: 0,
      colspan: 0
     };
    }
   }
  },
   // 合并单元格第一列
  resolveData(arr) {
   var obj = {};
   arr.forEach((val, key) => {
    if (!obj[val.channel_type]) {
     obj[val.channel_type] = {
      start: key,
      step: 1
     };
    } else {
     obj[val.channel_type].step++;
    }
   });
   this.myObj = obj;
   console.log(obj);
  },
  // 合并单元格第二列
  resolveData_two(arr) {
   var obj = {};
   arr.forEach((val, key) => {
    if (!obj[val.channel_name_chinese + val.channel_type]) {
     obj[val.channel_name_chinese + val.channel_type] = {
      start: key,
      step: 1
     };
    } else {
     obj[val.channel_name_chinese + val.channel_type].step++;
    }
   });
   this.myObj_two = obj;
   console.log(this.myObj_two, "this.myObj");
  },

3.需要调用一下下面两个函数,data为你所获取的所有数据

this.resolveData_two(data);
     this.resolveData(data);

4.合并结果如下图

vue单元格多列合并的实现

到此这篇关于vue单元格多列合并的实现的文章就介绍到这了,更多相关vue单元格多列合并内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
详解vue 组件注册
Nov 20 Vue.js
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
vscode自定义vue模板的实现
Jan 27 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
VUE项目实现主题切换的多种方法
Nov 26 #Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 #Vue.js
vue实现广告栏上下滚动效果
Nov 26 #Vue.js
Vue组件生命周期运行原理解析
Nov 25 #Vue.js
vue element-ul实现展开和收起功能的实例代码
Nov 25 #Vue.js
在Vue中使用mockjs代码实例
Nov 25 #Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 #Vue.js
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
yii中widget的用法
2014/12/03 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
js 数值项目的格式化函数代码
2010/05/14 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Vue中 key keep-alive的实现原理
2018/09/18 Javascript
Vue项目使用localStorage+Vuex保存用户登录信息
2019/05/27 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
浅谈vue 组件中的setInterval方法和window的不同
2020/07/30 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python做智能家居温湿度报警系统
2018/09/25 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
详解如何在cmd命令窗口中搭建简单的python开发环境
2019/08/29 Python
基于python监控程序是否关闭
2020/01/14 Python
Python面向对象程序设计之静态方法、类方法、属性方法原理与用法分析
2020/03/23 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
Python里面search()和match()的区别
2016/09/21 面试题
数控机械专业个人的自我评价
2014/01/02 职场文书
师德学习感言
2014/01/31 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
歌颂祖国的演讲稿
2014/05/04 职场文书
冰雪公主观后感
2015/06/16 职场文书
母亲节主题班会
2015/08/14 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
SpringBoot整合minio快速入门教程(代码示例)
2022/04/03 Java/Android
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js