iview table 表格合并单元格

一、如图所示

二、实现方式

表格用提供的span-method属性

<template>
    <Table ref="table" border :span-method="handleSpan" :row-key="true" :columns="tableColumns" :data="tableData"
      no-data-text="暂无数据">
    </Table>
</template>
<script>
export default {
  data() {
    return {
      tableColumns: [
        {
          title: '姓名',
          key: 'name',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '爱好',
          key: 'hobby',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '等级',
          key: 'level',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '年份',
          key: 'year',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '地址',
          key: 'address',
          align: 'center',
          minWidth: 85,
        },
        {
          title: '电话',
          key: 'phone',
          align: 'center',
          minWidth: 85,
        },

      ],
      tableData: [],
    };
  },
  methods: {
    handleSpan({ row, column, rowIndex, columnIndex }) {
      // 爱好 【序号2】、等级【序号3】、年份【序号4】 是多行的
      if (columnIndex < 2 || columnIndex > 4) {
        // 其余的 保留并合并成一行
        if (row._columnStatus == 'first') {
          return {
            rowspan: row.hobbyList.length,  // 爱好数量
            colspan: 1
          };
        } else if (row._columnStatus == 'next') {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    getData() {
      let origin = [
        {
          id: 1,
          name: 'lili',
          age: 18,
          hobbyList: [
            {
              hobby: '篮球',
              level: 'A',
              year: 1
            },
            {
              hobby: '足球',
              level: 'B',
              year: 2
            },
            {
              hobby: '羽毛球',
              level: 'C',
              year: 1.5
            }
          ],
          address: '山东',
          phone: '1978977767'
        },
        {
          id: 2,
          name: 'aazzz',
          age: 16,
          hobbyList: [],
          address: '新疆',
          phone: '13456444355'
        },
        {
          id: 3,
          name: 'ouz',
          age: 17,
          hobbyList: [{
            hobby: '唱歌',
            level: 'A',
            year: 3
          }],
          address: '新疆',
          phone: '13456444355'
        },
        {
          id: 4,
          name: 'eva',
          age: 19,
          hobbyList: [{
            hobby: '跳舞',
            level: 'B',
            year: 2
          },
          {
            hobby: '弹琴',
            level: 'A',
            year: 1
          }],
          address: '新疆',
          phone: '13456444355'
        }
      ];
      this.setData(origin);
    },
    setData(origin) {
      let tableData = [];
      origin.forEach(item => {
        if (item.hobbyList && item.hobbyList.length) {
          // 将爱好列表展开成多行
          item.hobbyList.forEach((it, i) => {
            tableData.push({
              ...item,
              ...it,
              _columnStatus: i == 0 ? 'first' : 'next',
              _rowIndex: i
            });
          });
        } else {
          tableData.push({
            ...item,
            _columnStatus: '',
            _rowIndex: 0
          });
        }
      });
      this.tableData = tableData;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
<style scoped>
</style>

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

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

相关文章

接口测试及接口测试工具

首先&#xff0c;什么是接口呢&#xff1f; 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信息&#xff0c;别人肯定不会把数据库共享给你&#xff0c;他只能给你…

AJAX-解决回调函数地狱问题

一、同步代码和异步代码 1.同步代码 浏览器是按照我们书写代码的顺序一行一行地执行程序的。浏览器会等待代码的解析和工作&#xff0c;在上一行完成之后才会执行下一行。这也使得它成为一个同步程序。 总结来说&#xff1a;逐行执行&#xff0c;需原地等待结果后&#xff0…

idea 2023 设置启动参数、单元测试启动参数

找到上方的editconfigration&#xff0c; 如下图&#xff0c;如果想在启动类上加&#xff0c;就选择springboot&#xff0c;如果想在单元测试加&#xff0c;就选择junit 在参数栏设置参数&#xff0c;多个参数以空格隔开 如果没有这一栏&#xff0c;就选择就可以了。 然后&…

【MongoDB】集群搭建实战 | 副本集 Replica-Set | 分片集群 Shard-Cluster | 安全认证

文章目录 MongoDB 集群架构副本集主节点选举原则搭建副本集主节点从节点仲裁节点 连接节点添加副本从节点添加仲裁者节点删除节点 副本集读写操作副本集中的方法 分片集群分片集群架构目标第一个副本集第二个副本集配置集初始化副本集路由集添加分片开启分片集合分片删除分片 安…

HK WEB3 MONTH Polkadot Hong Kong 火热报名中!

HK Web3 Month 11月除了香港金融科技周外&#xff0c;HK Web3 Month又是一大盛事&#xff0c;从10月29日开始开幕直到11月18日结束。此次将齐聚世界各地的Web3产业从业者、开发者、社群成员和学生来参与本次盛会。除外&#xff0c;超过75位产业知名的讲者与超过50场工作坊将为…

力扣算法-----一刷总结

之前学习算法题坚持不了几天就很容易放弃&#xff0c;一直没怎么系统的练习&#xff0c;偶然发现代码随想录居然推出了算法训练营&#xff0c;趁着时间比较足报了名跟着学习了两个月。 过去的两个月&#xff0c;中间伴着各种琐事&#xff0c;但还是坚持了下来&#xff0c;走过…

一键批量视频剪辑、合并,省时省力,制作专业视频

在当今数字化的时代&#xff0c;视频制作的需求日益增长。无论是个人用户还是专业人士&#xff0c;都需要能够快速、高效地处理视频&#xff0c;以适应不同的需求。但是&#xff0c;视频剪辑和合并往往是一个耗时且需要专业技能的过程。有没有一种方法可以简化这个过程&#xf…

VUE识别访问设备是移动端还是pc端

一、思路 有些网站需要区分手机端网页和pc端网页&#xff0c;做到不同设备访问不同的网页&#xff0c;增强用户的使用体验&#xff0c;可以在app.vue中作一个判断&#xff08;navigator.userAgent&#xff09;&#xff0c;然后跳转不同的路由。 二、原理 navigator.userAgent …

Springboot中解析JSON字符串(jackson库ObjectMapper解析JSON字符串)

1、ObjectMapper与JSONObject比较 1、ObjectMapper属于jackson库的一部分,JSONObject属于alibaba的fastjson&#xff0c;两者各有优劣&#xff0c;可根据自己的系统环境选择使用哪种技术。 2、目前来看&#xff0c;Jackson社区相对活跃&#xff0c;Spring MVC和Spring Boot都…

号牌模拟数据生成

说明 自己开发的测试数据生成工具&#xff0c;用于生成数据训练对应模型。 项目 效果

小菜React

1、Unterminated regular expression literal, 对于函数就写.ts&#xff0c;有dom元素就写.tsx 2、 The requested module /src/components/setup.tsx?t1699255799463 does not provide an export named Father export default useStore默认导出的钩子&#xff0c;组件引入的…

AndroidStudio 运行报错:Invalid keystore format

AndroidStudio 运行报错&#xff1a;Invalid keystore format 把这玩意儿删了重新打开Android Studio运行一下就好了&#xff01;&#xff01;&#xff01;

Linux中su鉴定故障解决办法

su鉴定故障问题 刚装完Linux的虚拟机&#xff0c;在终端中输入su命令&#xff0c;输入密码后出现鉴定故障。 原因是在安装linux系统时没有给root用户设置密码&#xff0c;重新设置密码即可。 解决步骤如下 设置root密码 sudo passwd root —>如果没有登录密码 则提示输入…

初识微服务技术栈

认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构&#xff0c;这些架构之间有怎样的差别呢&#xff1f; 导学&#xff1a; 了解微服务的优缺点&#xff1b;了解微服务架构的演变过程&am…

安装RabbitMQ

安装RabbitMQ 下载需要的两个包 # 这直接就可以安装了&#xff0c;下面 ‘上传对应的rmp包’ 操作 [rootrabbitmq-1 ~]# curl -s https://packagecloud.io/install/repositories/rabbitmq/erlang/script.rpm.sh | sudo bash [rootrabbitmq-1 ~]# yum install erlang-21.3.8.2…

第四章IDEA操作Maven

文章目录 创建父工程开启自动导入配置Maven信息创建Java模块工程创建 Web 模块工程 在IDEA中执行Maven命令直接执行手动输入 在IDEA中查看某个模块的依赖信息工程导入来自版本控制系统来自工程目录 模块导入情景重现导入 Java 类型模块 导入 Web 类型模块 创建父工程 开启自动导…

STM32存储左右互搏 SPI总线读写FLASH W25QXX

STM32存储左右互搏 SPI总线读写FLASH W25QXX FLASH是常用的一种非易失存储单元&#xff0c;W25QXX系列Flash有不同容量的型号&#xff0c;如W25Q64的容量为64Mbit&#xff0c;也就是8MByte。这里介绍STM32CUBEIDE开发平台HAL库操作W25Q各型号FLASH的例程。 W25QXX介绍 W25QX…

10个python爬虫入门实例

昨天带伙伴萌学习python爬虫&#xff0c;准备了几个简单的入门实例 涉及主要知识点: web是如何交互的requests库的get、post函数的应用response对象的相关函数&#xff0c;属性python文件的打开&#xff0c;保存 代码中给出了注释&#xff0c;并且可以直接运行哦 如何安装requ…

栈(定义,基本操作,顺序存储,链式存储)

目录 1.栈的定义1.重要术语2.特点 2.栈的基本操作3.栈的顺序存储1.顺序栈的定义2.基本操作1.初始化2.进栈3.出栈4.读栈顶 3.共享栈 4.栈的链式存储 1.栈的定义 栈( Stack&#xff09;是只允许在一端进行插入或删除操作的线性表。 一种受限的线性表&#xff0c;只能在栈顶进行插…

服务器数据库中了elbie勒索病毒怎么办,elbie勒索病毒解密,数据恢复

网络技术的不断成熟&#xff0c;为企业的生产运营提供了强有力的支撑&#xff0c;但是&#xff0c;随之而来的网络安全威胁也不断增加。云天数据恢复中心陆陆续续接到很多企业的求助&#xff0c;企业的服务器数据库e遭到了elbie勒索病毒攻击&#xff0c;导致企业计算机系统瘫痪…