文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-07-05 16:25

关注

这篇文章主要介绍“Vue中怎么合并el-table第一列相同数据”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中怎么合并el-table第一列相同数据”文章能帮助大家解决问题。

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

业务需求

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

解决办法

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

vue标签

<el-table :data="contractList" border   :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,      };    },

效果展示

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

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

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

问题描述

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

Vue中怎么合并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、当前列号columnIndexobjectSpanMethod({ 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,不执行合并         };       }    } }

关于“Vue中怎么合并el-table第一列相同数据”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯