element 动态合并表格的步骤

 更新时间:2020年12月31日 08:47:52   作者:FannieGirl  
这篇文章主要介绍了element 动态合并表格的步骤,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下

前言

  element 官方的例子太简单了,不满足实际的需求

  数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢

需求

  动态合并表格,数据来源于数据库

正文

  一开始,我的数据源是单独的数组,表格数据合并了几个数据,

  我根据各个数组的长度,来决定每一行的合并数

  结果:有些数据是正常的,但有些又合并出错了。计算的方式不对

尝试二 

dataPretreatment() 用这个方法 计算出每一行的行数

dataPretreatment(){  //表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
    // 如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
    // 如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,
    // 则向mergingRows中添入元素0,并将前一位元素+1,表示合并行数+1,
    // 以此往复,得到所有行的合并数,0即表示该行不显示。
     for(let i = 0; i < this.tableData.length; i ++){ // tabledata 表格数据源
       if(i === 0){
         this.mergingRows.push(1)
         this.mergingPos = 0
       }else {
        if(this.tableData[i].name === this.tableData[i - 1].name) { //哪些数据是要合并的 合并的条件是什么
         
          this.mergingRows[this.mergingPos] +=1
          this.mergingRows.push(0)
        }else {
          this.mergingRows.push(1)
          this.mergingPos = i
        }
       }
     }
   },

用这个方法 mergeColumn()绑定到官方提供的span-method 方法上面

mergeColumn({row, column, rowIndex, columnIndex}){
     if (columnIndex === 0) { //第一列
       const _row = this.mergingRows[rowIndex];
       const _col = _row>0 ? 1 : 0;
       return {
        rowspan: _row,
        colspan: _col
       }
     }
    // if(columnIndex === 1){ //第二列 每一行的条件可以不一样 这样就是动态多样合并表格啦
    //   const _row = this.mergingRows[rowIndex];
    //   const _col = _row>0 ? 1 : 0;
    //   return {
    //     rowspan: _row,
    //     colspan: _col
    //   }
    // }   
   },

  展示结果

注意注意

      1. 第一列 计算出要合并的行数

  2.发现鼠标在表格移动  mergeColumn()这个方法一直在调用

Fannie式总结

  一定要高清每一行的合并行数,按列来区分的

  切记切记哦!不然表格合并出来的 跟你想象的不一样

以上就是element 动态合并表格的步骤的详细内容,更多关于element 动态合并表格的资料请关注脚本之家其它相关文章!

相关文章

  • 基于ant design日期控件使用_仅月份的操作

    基于ant design日期控件使用_仅月份的操作

    这篇文章主要介绍了基于ant design日期控件使用_仅月份的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue的异步渲染axios问题

    Vue的异步渲染axios问题

    这篇文章主要介绍了Vue的异步渲染axios问题,具有很好的参考价值,希望对大家有所帮助。
    2023-03-03
  • 详解Vue Elementui中的Tag与页面其它元素相互交互的两三事

    详解Vue Elementui中的Tag与页面其它元素相互交互的两三事

    这篇文章主要介绍了详解Vue Elementui中的Tag与页面其它元素相互交互的两三事,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • element table 表格控件实现单选功能

    element table 表格控件实现单选功能

    本文主要介绍了element table 表格控件实现单选功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue 解决通过this.$refs来获取DOM或者组件报错问题

    Vue 解决通过this.$refs来获取DOM或者组件报错问题

    这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • Vue数据监听器watch和watchEffect的使用

    Vue数据监听器watch和watchEffect的使用

    今天我们来学习一下watch监听器和它的好兄弟watchEffect监听器。这个相对来说比较简单,用的不是很多,当然了,根据自己的项目情况自行决定使用,希望对大家有所帮助
    2023-02-02
  • vuex在vite&vue3中的简单使用说明

    vuex在vite&vue3中的简单使用说明

    这篇文章主要介绍了vuex在vite&vue3中的简单使用说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 详解在vue中如何实现屏幕录制与直播推流功能

    详解在vue中如何实现屏幕录制与直播推流功能

    屏幕录制和直播推流是现代Web应用中常用的功能,Vue作为一种流行的JavaScript框架,提供了一些工具和库,可以方便地实现屏幕录制和直播推流功能,本文将介绍如何在Vue中进行屏幕录制和直播推流,需要的朋友可以参考下
    2024-01-01
  • 详解vue-cli项目中怎么使用mock数据

    详解vue-cli项目中怎么使用mock数据

    这篇文章主要介绍了vue-cli项目中怎么使用mock数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 详解vue项目首页加载速度优化

    详解vue项目首页加载速度优化

    这篇文章主要介绍了详解vue项目首页加载速度优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论