Vue中如何合并el-table第一列相同数据

 更新时间:2023年03月27日 10:38:36   作者:半度纳  
这篇文章主要介绍了Vue中如何合并el-table第一列相同数据问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

Vue合并el-table第一列相同数据

业务需求

需要将el-table表格第一列相同的内容进行合并。

解决办法

el-table中使用 :span-method="objectSpanMethod"方法

vue标签

<el-table :data="contractList" border  style="width: 100%" :span-method="objectSpanMethod">
      <el-table-column label="各部门部1月-12月合同回款情况" align="center">
        <el-table-column prop="quarterly"  width="100" align="center" />
        <el-table-column prop="mon" width="80" align="center" />
        <el-table-column prop="amountReceived" width="180" align="center" />
        <el-table-column prop="remark" width="180" align="center" />
      </el-table-column>    
</el-table>

methods内部处理

/* 表格合并列和行 */
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          const _row = this.flitterData(this.contractList).one[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
    },
    /**合并表格的第一列,处理表格数据 */
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
        //注意这里的quarterly是表格绑定的字段,根据自己的需求来改
          if (item.quarterly === arr[index - 1].quarterly) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },

效果展示

el-table合并相同单元格问题

项目需求table表格中,相同的类型合并成一个单元格展示。

问题描述

el-table并没有相关的语法直接合并,需要我们自己传入一个方法返回一个数组格式,来确定要合并行列。

效果图

解决问题

首先需要在 el-table 标签上绑定:span-method="objectSpanMethod"

<el-table :data="tableData" :span-method="objectSpanMethod" >
    <el-table-column prop="projectName" label="订单类型" />  
</el-table>

再去methods中定义 objectSpanMethod 方法,data中定义一个rowSpanArr参数

// 获取相同名称的个数 tableData: 表格的数据, projectName: 确定相同的参数
handleTableData(tableData){
      let rowSpanArr = [], position = 0;
      for (let [index, item] of tableData.entries()) {
        if (index == 0) {
          rowSpanArr.push(1);
          position = 0;
        } else {
          if (item.projectName == tableData[index - 1].projectName) {
            rowSpanArr[position] += 1; //项目名称相同,合并到同一个数组中
            rowSpanArr.push(0);
          } else {
            rowSpanArr.push(1);
            position = index;
          }
        }
      }
      this.rowSpanArr = rowSpanArr
}
// 单元格的处理方法 当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
objectSpanMethod({ row, column, rowIndex, columnIndex }){
     if (columnIndex === 0) {
        const rowSpan = this.rowSpanArr[rowIndex];
        return {
          rowspan: rowSpan, //行
          colspan: 1 //列
        };
      }
}
        

扩展

objectSpanMethod({ row, column, rowIndex, columnIndex }) {
   if (columnIndex === 0) { // 判断是不是第一列,只有第一列才执行合并
      if (rowIndex % 2 === 0) { // 判断能不能被2整除
          return {
            rowspan: 2, // 从当前单元格开始,执行合并2行
            colspan: 1, // 从当前单元格开始,执行合并1列
          };
       } else {
         return { // 第一列的其他元素不执行合并
           rowspan: 0, // 为0,不执行合并
           colspan: 0  // 为0,不执行合并
         };
       }
    }
 }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • mockjs+vue页面直接展示数据的方法

    mockjs+vue页面直接展示数据的方法

    这篇文章主要介绍了mockjs+vue页面直接展示数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue+tp5实现简单登录功能

    vue+tp5实现简单登录功能

    这篇文章主要为大家详细介绍了vue+tp5实现简单登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue+Django项目部署详解

    Vue+Django项目部署详解

    这篇文章主要介绍了Vue+Django项目部署详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • Vue privide 和inject 依赖注入的使用详解

    Vue privide 和inject 依赖注入的使用详解

    这篇文章主要介绍了Vue privide 和inject 依赖注入的用法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • Vuepress 搭建带评论功能的静态博客的实现

    Vuepress 搭建带评论功能的静态博客的实现

    这篇文章主要介绍了Vuepress 搭建带评论功能的静态博客的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue通过v-for实现年份自动递增

    Vue通过v-for实现年份自动递增

    这篇文章主要为大家详细介绍了Vue通过v-for实现年份自动递增,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Vue如何监测数组类型数据发生改变的(推荐)

    Vue如何监测数组类型数据发生改变的(推荐)

    这篇文章主要介绍了Vue如何监测数组类型数据发生改变的,本文通过实例代码图文详解给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-11-11
  • vue实现自定义组件挂载原型上

    vue实现自定义组件挂载原型上

    这篇文章主要介绍了vue实现自定义组件挂载原型上方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3.0 自己实现放大镜效果案例讲解

    Vue3.0 自己实现放大镜效果案例讲解

    这篇文章主要介绍了Vue3.0 自己实现放大镜效果案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-07-07
  • 用Vue.js在浏览器中实现裁剪图像功能

    用Vue.js在浏览器中实现裁剪图像功能

    在本教程中,我们将探讨如何在浏览器中使用 JavaScript 库来操作图片,为服务器上的存储做准备,并在 Web 程序中使用。我们将使用 Vue.js 而不是原生 JavaScript来完成此操作,需要的朋友可以参考下
    2019-06-06

最新评论