vue单元格多列合并的实现

 更新时间:2020年11月26日 11:15:09   作者:Yolanda本尊58658  
这篇文章主要介绍了vue单元格多列合并的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

一.多列合并

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

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单元格多列合并内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vuex中数据持久化插件vuex-persistedstate使用详解

    vuex中数据持久化插件vuex-persistedstate使用详解

    这篇文章主要介绍了vuex中数据持久化插件vuex-persistedstate使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue封装的组件全局注册并引用

    Vue封装的组件全局注册并引用

    这篇文章主要为大家详细介绍了Vue封装的组件全局注册并引用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue element input如何让浏览器不保存密码

    vue element input如何让浏览器不保存密码

    这篇文章主要介绍了vue element input如何让浏览器不保存密码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue-Cli项目优化操作的实现

    Vue-Cli项目优化操作的实现

    这篇文章主要介绍了Vue-Cli项目优化操作,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue3监听路由的变化代码示例

    vue3监听路由的变化代码示例

    在vue项目中假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新,这篇文章主要给大家介绍了关于vue3监听路由的变化的相关资料,需要的朋友可以参考下
    2023-09-09
  • vue3源码剖析之简单实现方法

    vue3源码剖析之简单实现方法

    源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下
    2021-09-09
  • vue elementui动态添加el-input实例代码

    vue elementui动态添加el-input实例代码

    最近遇到一个新的需求,需要动态添加el-input,这篇文章主要给大家介绍了关于vue elementui动态添加el-input的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • vue3解构赋值失去响应式引发的问题思考

    vue3解构赋值失去响应式引发的问题思考

    这篇文章主要介绍了vue3解构赋值失去响应式引发的问题思考,文章围绕主题展开详细的内容介绍,具有一定的参考价值,感兴趣的小伙伴可以参考一下
    2022-06-06
  • vue.js中window.onresize的超详细使用方法

    vue.js中window.onresize的超详细使用方法

    这篇文章主要给大家介绍了关于vue.js中window.onresize的超详细使用方法,window.onresize 是直接给window的onresize属性绑定事件,只能有一个,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Vue 日期获取的示例代码

    Vue 日期获取的示例代码

    moment.js是一款现在对时间处理的强大的函数,这篇文章主要介绍了Vue 日期获取的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01

最新评论