Element中el-table动态合并单元格(span-method方法)

 更新时间:2023年05月30日 11:14:28   作者:小星星__  
本文主要介绍了Element中el-table动态合并单元格(span-method方法),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

合并单元格

记录一下工作时遇到的 el-table 合并单元格的需求,超详细😊

el-table官方提供了合并单元格的方法与返回格式 如下:

根据叙述有了如下思路:
因为后端返回的数据非统一, 可能不是按照类别排好的😨, 所以官网的例子满足不了所有的需求所以我们通过遍历table的数据比较前后两个元素是否相等, 来构造一个spanArr用来存放rowspan, 最后通过rowspan的值来判断colspan的值😊.

案例如下, 这是我需要处理的一个表格:
需要根据数据动态的合并

对应的配置数组为

处理数据

因为获取的数据的非统一性, 我们首先要将数据根据我们想要合并的字段进行排序分组, 这里我实现了一个简单的方法来处理数据:

// data 为 表格数据 , params 为需要合并的字段
groupBy (data, params) {
    const groups = {};
    data.forEach(v => {
    	// 获取data中的传入的params属性对应的属性值
        const group = JSON.stringify(v[params]);
        // 把group作为groups的key,初始化value,循环时找到相同的v[params]时不变
        groups[group] = groups[group] || [];
        // 将对应找到的值作为value放入数组中
        groups[group].push(v);
    })
    // 返回处理好的二维数组
    return Object.values(groups);
},

此时打印一下我们的数据console.log(this.groupBy(this.tableListData.items, 'FirstIndex'))

如图, 我们已经将数据分好组并合并在一个数组中啦, FirstIndex相同的在一个数组

构造控制合并的数组spanArr

这里实现了一个方法, 用来构造一个spanArr数组赋予rowspan,即控制行合并

  • 接收重构数组 let arr = []
  • 设置索引 let pos = 0
  • 控制合并的数组 this.spanArr = []

先将groupby()处理好的数据再次用arr进行处理:连接所有数组成员为一个新数组
this.groupBy(this.tableListData.items, 'FirstIndex').map(v => (arr = arr.concat(v)))

现在处理好了数据,需要赋予原数据了:this.tableListData.items = arr

但是因为我是写在getSpanArr(data, params)方法中的,已经通过形参data将 this.tableListData.items传入了这里,如果想方便封装调用的话,不用每次使用都需要再次写入 this.tableListData.items = arr
于是想到一个办法,js数组的shift()和push()是直接修改数组所占内存的方法。
所以有:

arr.map(res => {
    // 每次遍历都删除data && this.tableListData.items的第一个元素
    data.shift()
    // 每次遍历都将arr数组元素对应push进 data && this.tableListData.items
    data.push(res)
})

还需要定义一个redata存放arr要合并字段的value
const redata = arr.map(v => v[params])

reduce处理spanArr数组

使用reduce方法比较redata前后两个元素是否相等,相等的话spanArr中对应索引的元素的值+1,并且在其后增加一个0占位(防止合并过后表格数据错位),否则的话增加一个1占位,并记录当前索引,往复循环,构造一个给 rowspan 取值判断合并的数组:

  const redata = arr.map(v => v[params])
  redata.reduce((old, cur, i) => {
    // old 上一个元素  cur 当前元素  i 索引
    if (i === 0) {
      // 第一次判断先增加一个 1 占位 ,索引为0 
      this.spanArr.push(1)
      pos = 0
    } else {
      if (cur === old) {
        this.spanArr[pos] += 1
        this.spanArr.push(0)
      } else {
        this.spanArr.push(1)
        pos = i
      }
    }
    return cur
  }, {})

看一下现在的数据spanArr, 这里传的参数为SecondIndex, 即表格的第二列

数组中大于0的数字就是我们数据中要合并的这组数据的数量, 同时也是这组数据需要合并的列数,而0就是代表这列不合并, 依次遍历,实现合并所选字段这一列的最终目的 如图理解:

返回最终结果

最后一步啦😊根据官方给的方法把我们处理好的spanArr传给rowspan即可

spanMethod({ row, column, rowIndex, columnIndex }) {
  // 第一列
  if (columnIndex === 0) {
    const _row = this.spanArr[rowIndex];
    const _col = _row > 0 ? 1 : 0;
    return {
      rowspan: _row,
      colspan: _col
    }
  }
}

效果如图!

完整代码

最后把完整代码贴上:

// ......
    mounted() {
      this.getSpanArr(this.tableListData.items, 'FirstIndex');
    },
    methods: {
      groupBy (data, params) {
        const groups = {}
        data.forEach(v => {
          const group = JSON.stringify(v[params])
          groups[group] = groups[group] || []
          groups[group].push(v)
        })
        return Object.values(groups)
      },
      getSpanArr (data, params) {
        let arr = []
        let pos = 0
        this.spanArr = []
        this.groupBy(data, params).map(v => (arr = arr.concat(v)))
        arr.map(res => {
          data.shift()
          data.push(res)
        })
        const redata = arr.map(v => v[params])
        redata.reduce((old, cur, i) => {
          if (i === 0) {
            this.spanArr.push(1)
            pos = 0
          } else {
            if (cur === old) {
              this.spanArr[pos] += 1
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              pos = i
            }
          }
          return cur
        }, {})
      },
      spanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      }
    }

到此这篇关于Element中el-table动态合并单元格(span-method方法)的文章就介绍到这了,更多相关Element el-table动态合并单元格内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue之监听数据的原理详解

    Vue之监听数据的原理详解

    这篇文章主要为大家介绍了Vue之监听数据的原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
    2021-11-11
  • vue对象拷贝,解决由于引用赋值修改原对象的方式

    vue对象拷贝,解决由于引用赋值修改原对象的方式

    这篇文章主要介绍了vue对象拷贝,解决由于引用赋值修改原对象的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue基于v-charts封装双向条形图的实现代码

    vue基于v-charts封装双向条形图的实现代码

    这篇文章主要介绍了vue基于v-charts封装双向条形图的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • 在项目vue中使用echarts的操作步骤

    在项目vue中使用echarts的操作步骤

    这篇文章主要介绍了在项目vue中使用echarts的操作步骤,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue实现文章评论和回复列表

    vue实现文章评论和回复列表

    这篇文章主要为大家详细介绍了vue实现文章评论和回复列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 详解Axios统一错误处理与后置

    详解Axios统一错误处理与后置

    这篇文章主要介绍了详解Axios统一错误处理与后置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue中修改浏览器图标和名字的几种方式

    vue中修改浏览器图标和名字的几种方式

    当针对不同客户需要提供不同的图标时,页面其他图标好替换,但是网页图标就不太一样了,下面这篇文章主要给大家介绍了关于vue中修改浏览器图标和名字的几种方式,需要的朋友可以参考下
    2022-10-10
  • vue框架实现将侧边栏完全隐藏

    vue框架实现将侧边栏完全隐藏

    这篇文章主要介绍了vue框架实现将侧边栏完全隐藏,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • el-form-renderer使用教程

    el-form-renderer使用教程

    本文主要介绍了el-form-renderer使用教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue实现右键菜单栏

    vue实现右键菜单栏

    这篇文章主要为大家详细介绍了vue实现右键菜单栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论