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项目利用axios请求接口下载excel
Nov 17 Vue.js
对vue生命周期的深入理解
Dec 03 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
Vue实现图书管理案例
Jan 20 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
详解Vue的options
May 15 Vue.js
Vue+Flask实现图片传输功能
Apr 01 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变量的值类型和引用类型
2015/10/21 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JavaScript 应用类库代码
2008/06/02 Javascript
jQuery实现长文字部分显示代码
2013/05/13 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
解决Vue @submit 提交后不刷新页面问题
2020/07/18 Javascript
小程序实现录音功能
2020/09/22 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
python回调函数的使用方法
2014/01/23 Python
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
基于python的字节编译详解
2017/09/20 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
python禁用键鼠与提权代码实例
2019/08/16 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
Everything But Water官网:美国泳装品牌
2019/03/17 全球购物
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
最常使用的求职信
2014/05/25 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
经理岗位职责范本
2015/04/15 职场文书
作息时间调整通知
2015/04/22 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书