element之el-table合并列功能

目标效果如下:

 实现代码如下:

html部分:
<!--定义表格组件,用组件自带的span-method属性定义合并列的方法-->
<el-table :data="tableData" :span-method="spanRow">
    <el-table-column  prop="RegionName"  label="园区"></el-table-column>
</el-table>



js部分:
data(){
    return {
        //记录需要合并列的rowspan数值
        row_span:[],
        //记录需要设置rowspan的行序号,因为数值是和row_span进行累加的结果,需要把第一个赋值为0才不会报错
        row_index:[0]
    }
}
method:{
    spanRow({row,column,rowIndex,columnIndex}){
        if(columnIndex===0){
            for(let i=0;i<this.row_index.length;i++){
                if(rowIndex===this.row_index[i])
                    return [this.row_span[i],1]
            }
            return [0,0]
        }
    },
    get_rowspan(){
        this.row_span=[];this.row_index=[0]
        //通过判断本行数据和下一行数据是否相等给row_span赋值
        for(let i=0,j=1;i<this.tableData.length-1;i++){
            if(this.tableData[i].RegionName==this.tableData[i+1].RegionName)
                j++
            else{
                this.row_span.push(j)
                j=1
            }
            if(i==this.tableData.length-2)
                this.row_span.push(j)
        }
        //用得到的row_span给row_index赋值
        for(let i=0;i<this.row_span.length-1;i++){
            this.row_index.push(this.row_index[this.row_index.length-1]+this.row_span[i])
        }
        //考虑到表格数据仅有一行的特殊情况
        if(this.tableData.length==1)
            this.row_span.push(1)
    }
}

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

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

相关文章

独立站如何实现全球开店,获得更多流量?

对于独立站卖家来说&#xff0c;针对一个国家搭建一个站点、运营&#xff0c;就已经要花上不少力气了。更别说想要在多个市场售卖了&#xff0c;每个国家不同的货币、语言、定价、付款方式等等就已经够让人头大。 研究显示&#xff0c;40%的人不会从其他语言的网站上购买产品。…

Python基础综合案例-数据可视化(地图)

今天给大家带来的是Python综合实战开发的数据可视化操作 通过python实现对数据的分析、可视化 数据来源:线上公布数据&#xff0c;需要可私信 前期准备工作&#xff1a;Python可视化准备工作 前期模块安装等前期基础的准备工作大家可以看我之前的文章讲解&#xff0c;有问题可…

交易所行情基础相关知识

目录 一、行情基本概念 二、简单交易模型 三、行情系统结构 四、各种行情协议 1.FIX 2.STEP 3.FAST 4.Binary 五、集合竞价和连续竞价 1.集合竞价 2.连续竞价 六、上交所LDDS和深交所Binary行情对比 一、行情基本概念 行情是描述市场繁荣状态的数据&#xff0c;…

geoserver发布arcgis server离线瓦片

1.使用tif文件也可以发布服务&#xff0c;但是我下载的tif文件发布的服务总数模糊不清&#xff0c;原因可能是地图比例尺问题。 2.仔细研究&#xff0c;发现下载的arcgis server瓦片都是高清的&#xff0c;于是想到直接加载arcgis瓦片&#xff0c;这样图片/坐标系之间问题都完…

Elasticsearch入门

Elasticsearch简介 分布式的、Restful风格的搜索引擎支持对各种类型的数据的检索&#xff1a;结构化、非结构化的数据均可搜索速度快&#xff0c;可以提供实时的搜索服务&#xff1a;可以提供实时的搜索服务便于水平扩展&#xff0c;每秒可以处理PB级海量数据&#xff1a;集群…

【PHP+VUE】手术麻醉临床信息管理系统源码

一、前言 手术麻醉信息系统将为医院手术室带来规范化的工作管理标准、实时快捷的信息流&#xff0c;医疗经验的积累和有效归纳, 全面解决了手术室麻醉过程管理的信息化和数字化。 能够规范手术室的工作流程&#xff0c;实现麻醉、手术过程中的信息数字化和网络化&#xff0c;…

Jenkins---jenkins生成Allure报告

目录 前言 Allure插件安装 生成Allure报告 遇到的问题 总结&#xff1a; 前言 前几天介绍了如何生成html报告&#xff0c;目前绝大部分公司都是用的allure报告&#xff0c;那么今天也介绍下如何通过jenkins生成allure报告。 Allure插件安装 jenkins中存在支持allure报告…

如何批量将PDF转换为图片?

在生活工作中&#xff0c;我们会处理很多电子合同。这些电子合同一般是PDF格式&#xff0c;不但存储空间大&#xff0c;且预览起来不太便捷&#xff0c;需要我们转换为图片格式更方便预览。如果人工一一处理比较繁琐复杂&#xff0c;有没有什么方案可以快速将pdf转换为图片呢&a…

数分面试题-SQL高频考点

目录标题 1、SQL语言分类2、join连接3、列转换3.1 列转行3.2 行转列 4、分页查询5、字符串处理函数5.1 字符函数5.2 数学函数5.3 日期函数 6、索引6.1 什么是索引6.2 建立索引的优缺点6.3 索引有哪些6.4 索引为什么快6.5 什么情况下加索引6.6 怎么知道索引用没用上6.7 用过组合…

Jmeter实现生成全局参数-随机数

我在做项目的过程中&#xff0c;用的比较多的是【前置处理中】-用户参数 步骤一&#xff1a;添加参数处理器 步骤二&#xff1a;填写项目中可能会用到的一些参数&#xff08;固定的或者随机的都可以&#xff09; teacher_name${__RandomString(1,赵钱孙李周吴郑王冯陈褚卫蒋沈…

计算机网络(谢希仁版)基础期末复习

一、前言 该篇文章是对计算机网络&#xff08;谢希仁版&#xff09;常考的期末复习知识点进行的总结&#xff0c;可以供大家进行简单的复习&#xff0c;适用于网络工程、计算机网络类专业的同学进行复习使用。其他对计算机网络感兴趣的同学、相关专业人士也可进行阅读。 二、第…

SpringBoot第27讲:SpringBoot集成MySQL - MyBatis 多个数据源

SpringBoot第27讲&#xff1a;SpringBoot集成MySQL - MyBatis 多个数据源 本文是SpringBoot第27讲&#xff0c;在某些场景下&#xff0c;Springboot需要使用多个数据源&#xff0c;以及某些场景会需要多个数据源的动态切换。本文主要介绍上述场景及 SpringBootMyBatis实现多个数…

数据湖真的能取代数据仓库吗?【SNP SAP数据转型 】

数据湖和数据仓库的存在并不冲突&#xff0c;也并不是取代的关系&#xff0c;而是相互的融合关系。 数据湖是近两年中比较新的技术在大数据领域中&#xff0c;对于一个真正的数据湖应该是什么样子&#xff0c;现在对数据湖认知还是处在探索的阶段&#xff0c;像现在代表的开源产…

[SUCTF2019]hardcpp

前言 又遇到ollvm了 解混淆 可以直接用angr运行脚本去除除控制流平坦化&#xff0c;最好在ancoda等管理环境里面安装angr不然问题很多 https://github.com/Pure-T/deflat 去除前 去除后&#xff0c;它将多余的直接nop了 分析 主要加密区域位于匿名函数这一块&#xff0c…

Kafka 小结

Kafka 是由 Linkedin 开发并开源的分布式消息系统&#xff0c;因其分布式及高吞吐率而被广泛使用&#xff0c;现已与 Cloudera Hadoop、Apache Storm、Apache Spark、Flink 集成。 Kafka 使用场景 页面访问量 PV、页面曝光 Expose、页面点击 Click 等行为事件&#xff1b;实时计…

uniapp中uni-popup的用法——实例讲解

uni-pop弹出层组件&#xff0c;在应用中弹出一个消息提示窗口、提示框等,可以设置弹出层的位置&#xff0c;是中间、底部、还是顶部。 如下图效果所示&#xff1a;白色区域则为弹出的pop层。 一、 创建一个自定义组件&#xff1a; 1.项目中安装下载uni-pop插件。 2.把pop内容…

同一局域网内IP 192.168.1.10 和 IP 10.10.10.8 可以互相访问吗?

同一局域网内IP 192.168.1.10 和 IP 10.10.10.8 可以互相访问吗&#xff1f; 1、网上邻居的方式&#xff1a; 鼠标点击 我的电脑 属性 计算机名&#xff0c;查看一下 计算机名&#xff08;这个可以点击更改&#xff0c;自己设定和更改&#xff09; 查看一下工作组&#xff0c;一…

Python———PyCharm下载和安装

&#xff08;一&#xff09;开发环境介绍 开发环境&#xff0c;英文是 IDE &#xff08; Integrated Development Environment 集成开发环境&#xff09;。 不要纠结于使用哪个开发环境。开发环境本质上就是对Python 解释器python.exe 的封装&#xff0c;核心都一样。可以说&…

PostgreSQL使用localhost可以连接,使用IP无法连接

问题描述&#xff1a;PostgreSQL使用localhost可以连接&#xff0c;使用IP无法连接 默认情况下&#xff0c;刚安装完成的 postgresSQL12 无法使用 数据库连接工具&#xff08;如postman&#xff09;连接。需要为其修改配置&#xff0c;开放连接权限。 修改pg_hba.conf 增加…

采用VMD按照某一坐标轴旋转坐标结构

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩&#xff01; 主要专栏内容包括&#xff1a; †《LAMMPS小技巧》&#xff1a; ‾ \textbf…
最新文章