elementUI根据列表id进行列合并@莫成尘

本文章提供了elementUI根据列表id进行列合并的demo,效果如图(可直接复制代码粘贴)

表格合并

<template>
  <div id="app">
    <el-table border :data="tableList" style="width: 100%" :span-method="objectSpanMethod">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <el-table-column prop="id" label="ID" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="type" label="后缀">
      </el-table-column>
      <el-table-column prop="about" label="地址">
      </el-table-column>
      <el-table-column prop="dec" label="第一联想">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      tableList: [
        { id: 10010, name: '小日', type: '子', dec: '小男孩来过这个地方', about: '广岛' },
        { id: 10010, name: '小日', type: '子', dec: '胖子来过这个地方', about: '长崎' },
        { id: 10010, name: '小日', type: '子', dec: '李梅在这里抽过yan', about: '东京' },
        { id: 10010, name: '小日', type: '子', dec: '这是一个地震多发的地方', about: '大板' },
        { id: 21121, name: '印度', type: '斯坦', dec: '干净又卫生的超级大国', about: '德里' },
        { id: 21121, name: '印度', type: '斯坦', dec: '新德里是首都', about: '新德里' },
        { id: 21121, name: '印度', type: '斯坦', dec: '这是提前选好的下一个首都', about: '新新德里' },
        { id: 21121, name: '印度', type: '斯坦', dec: '没办法的话这是下下个首都', about: '新新新德里' },
      ]
    }
  },
  methods:{
    //表格合并
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log(row,column)
      if ( //if条件判断的是合并那一竖列
        columnIndex == 0 ||
        columnIndex == 1 ||
        columnIndex == 2 ||
        columnIndex == 3
      ) {
        const _row = this.flitterData2(this.tableList).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    flitterData2(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
        } else {
          //name 修改
          if (item.id === arr[index - 1].id) {
            //pid就是判断相同的字段
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/873519.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【STM32】SPI通信-软件与硬件读写SPI

SPI通信-软件与硬件读写SPI 软件SPI一、SPI通信协议1、SPI通信2、硬件电路3、移位示意图4、SPI时序基本单元(1)开始通信和结束通信(2)模式0---用的最多(3)模式1(4)模式2(5)模式3 5、SPI时序(1)写使能(2)指定地址写(3)指定地址读 二、W25Q64模块介绍&#xff11;、W25Q64简介&am…

小怡分享之数据结构LinkedList与链表

前言&#xff1a; &#x1f308;✨前面小怡给大家介绍了ArrayList&#xff0c;今天小怡给大家介绍一下链表。 1.ArrayList的缺陷 当在ArrayList任意位置插入或者删除元素时&#xff0c;就需要后续元素整体往前或者往后搬移&#xff0c;时间复杂度为O&#xff08;n&#xff09;…

网恋照妖镜源码搭建教程

文章目录 前言原理创建网站1.打开网站设置 配置ssl2.要打开强制HTTPS&#xff0c;用宝塔免费的ssl证书即可&#xff0c;也可以使用其他证书&#xff0c;必须是与域名匹配的3.上传文件至根目录进行解压4.解压后&#xff0c;修改文件 sc.php 里面的内容5.其余探索 结语 前言 前俩…

Excel和Word日常使用记录:

Excel使用总结 表格颜色填充&#xff1a; 合并单元格&#xff1a; 选中你要合并的单元格区域。 按下快捷键 Alt H&#xff0c;然后松开这些键。 再按下 M&#xff0c;接着按 C。 这个组合键执行的操作是&#xff1a;Alt H&#xff1a;打开“主页”选项卡。 M&#xff1a;选…

“阡陌云旅”黄河九省文化旅游平台

“阡陌云旅”黄河九省文化旅游平台 GitHub地址&#xff1a;https://github.com/guoJiaQi-123/Yellow-River-Cloud-Journey 项目背景 “阡陌云旅”黄河九省文化旅游平台 “阡陌云旅” 黄河九省文化旅游平台是一个专注于黄河流域九省文化旅游资源整合与推广的项目。 黄河是中…

[oeasy]python0004_游乐场_和python一起玩耍_python解释器_数学运算

和python玩耍 &#x1f94a; Python 回忆 上次 了解shell环境中的命令 <colgroup><col span"1"><col span"1"></colgroup> | 命令 | 作用 | | whoami | 显示当前用户名 | | pwd | 显示当前文件夹 | | ls | 列出当前文件夹下的内容…

51单片机的无线病床呼叫系统【proteus仿真+程序+报告+原理图+演示视频】

1、主要功能 该系统由AT89C51/STC89C52单片机LCD1602显示模块温湿度传感器模块矩阵按键时钟模块等模块构成。适用于病床呼叫系统、16床位呼叫等相似项目。 可实现基本功能: 1、LCD1602实时显示北京时间、温湿度信息、呼叫床位等信息&#xff1b; 2、DHT11采集病房温湿度信息&…

WSL 下的 CentOS 装 Docker

WSL 下的 CentOS 装 Docker 卸载旧版本安装前的准备工作1. 安装 yum-utils2. 添加阿里云的 yum 镜像仓库3. 快速生成 Yum 缓存 安装Docker启动docker运行 hello-world设置镜像加速器&#xff08;阿里云的&#xff09;卸载 Docker 引擎参考资料 卸载旧版本 sudo yum remove doc…

鸿蒙(API 12 Beta6版)超帧功能开发【ABR功能开发】

业务流程 基于相机运动感知策略的ABR主要业务流程如下&#xff1a; 用户进入ABR适用的游戏场景。游戏应用调用[HMS_ABR_CreateContext]接口并指定图形API类型&#xff0c;创建ABR上下文实例。游戏应用调用[HMS_ABR_SetTargetFps]接口初始化ABR实例&#xff0c;配置目标帧率属性…

excel透视图、看板案例(超详细)

一、简介 Excel透视图&#xff08;Pivot Table&#xff09; 功能&#xff1a;透视图是一种强大的数据分析工具&#xff0c;用于汇总、分析和展示数据。它允许用户对数据进行重新排列和分类&#xff0c;从而更容易发现数据中的模式和趋势。用途&#xff1a;可以用来生成动态报表…

【Python机器学习】词向量推理——词向量

目录 面向向量的推理 使用词向量的更多原因 如何计算Word2vec表示 skip-gram方法 什么是softmax 神经网络如何学习向量表示 用线性代数检索词向量 连续词袋方法 skip-gram和CBOW&#xff1a;什么时候用哪种方法 word2vec计算技巧 高频2-gram 高频词条降采样 负采样…

fastadmin 文件上传七牛云

1-安装七牛云官方SDK composer require qiniu/php-sdk 2-七牛云配置 <?phpnamespace app\common\controller;use Qiniu\Storage\BucketManager; use think\Config; use Qiniu\Auth; use Qiniu\Storage\UploadManager; use think\Controller; use think\Db;/*** 七牛基类*…

echarts 实现签到记录日历组件

以下笔记来源&#xff1a;编程导航 分析 有三种基本图表可以选择&#xff1a; 基础日历图&#xff1a;https://echarts.apache.org/examples/zh/editor.html?ccalendar-simple日历热力图&#xff1a;https://echarts.apache.org/examples/zh/editor.html?ccalendar-heatmap…

使用paddlerocr识别固定颜色验证码

1 引言 本文使用opencv和paddlerocr识别出固定颜色的验证码&#xff0c;原理不解释&#xff0c;安装包的方法自行查找&#xff0c;只提供代码和思路。 1 使用opencv对特定颜色区域进行提取2 使用paddlerocr识别并输出验证码 2 代码 2.1 读取图片&#xff0c;提取蓝色区域 …

C语言深入理解指针4

1.回调函数 回调函数是通过函数指针调用的函数 将函数指针作为参数传递给另一个函数&#xff0c;当这个函数指针被用来调用其所指向的函数时&#xff0c;被调用的函数就是回调函数&#xff0c;回调函数不是应该由该函数的实现方直接调用&#xff0c;而是在特定的事件或条件发生…

ASIO网络调试助手之一:简介

多年前&#xff0c;写过几篇《Boost.Asio C网络编程》的学习文章&#xff0c;一直没机会实践。最近项目中用到了Asio&#xff0c;于是抽空写了个网络调试助手。 开发环境&#xff1a; Win10 Qt5.12.6 Asio(standalone) spdlog 支持协议&#xff1a; UDP TCP Client TCP Ser…

JavaWeb【day11】--(SpringBootWeb案例)

SpringBootWeb案例 前面我们已经实现了员工信息的条件分页查询以及删除操作。 关于员工管理的功能&#xff0c;还有两个需要实现&#xff1a; 新增员工 修改员工 首先我们先完成"新增员工"的功能开发&#xff0c;再完成"修改员工"的功能开发。而在&quo…

【C++】STL学习——priority_queue(了解仿函数)

目录 priority_queue介绍迭代器种类priority_queue实现仿函数仿函数的使用 priority_queue介绍 优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一个元素总是它所包含的元素中最大的。此上下文类似于堆&#xff0c;在堆中可以随时插入元素&#x…

SQL 编程基础

SQL&#xff08;结构化查询语言&#xff09;广泛应用于数据库操作&#xff0c;是每个程序员都需要掌握的技能之一。这篇文章将带你从基础入门&#xff0c;了解SQL编程中的常量、变量及流程控制语句。我们将采用简单易懂的语言&#xff0c;结合实际示例&#xff0c;帮助你轻松理…

uniapp scroll-view滚动页面

页面滚动固定距离&#xff08;scrollTop&#xff09; <template><view><button click"Test">测试</button><scroll-view style"height: 100px;" :scroll-top"scrollTop" scroll-y"true" class"scrol…