当前位置: 首页 > news >正文

el-table实现静态和动态合并单元格 以及内容显示的问题

实现效果图
在这里插入图片描述

  <el-tablev-loading="loading":data="tableData"style="width: 100%":row-class-name="tableRowClassName"size="small"><el-table-column fixed label="序号" width="50"><el-table-column align="center" width="50"><template slot-scope="scope"><span>{{ scope.$index + 1 }}</span></template></el-table-column></el-table-column><el-table-column fixed label="基本信息" width="420" align="center"><el-table-column label="项目" width="140" align="center"><template slot-scope="scope"><span>{{ scope.row.projectname }}</span></template></el-table-column><el-table-column label="职位" width="160" align="center"><template slot-scope="scope"><span>{{ scope.row.positionname }}</span></template></el-table-column><el-table-column label="姓名" width="120" align="center"><template slot-scope="scope"><span>{{ scope.row.saleusername }}</span></template></el-table-column></el-table-column><el-table-columnv-for="(item, index) in projectBreakUpCpmmandList.projectBreakUpCpmmandList":key="index":label="item.months + '月'"align="center"show-overflow-tooltip><el-table-column label="入住指标(人)" width="140" align="center"><template slot-scope="scope">{{scope.row.projectBreakUpCpmmandList[index].checkingoal}}</template></el-table-column><el-table-columnprop="address"label="完成入住(人)"width="140"align="center"><template slot-scope="scope">{{scope.row.projectBreakUpCpmmandList[index].checkinfinish}}</template></el-table-column><el-table-columnprop="zip"label="回款指标(万元)"width="140"align="center"><template slot-scope="scope">{{scope.row.projectBreakUpCpmmandList[index].backamountgoal}}</template></el-table-column><el-table-columnprop="address"label="完成回款(万元)"width="140"align="center"><template slot-scope="scope">{{scope.row.projectBreakUpCpmmandList[index].backamountfinish}}</template></el-table-column><el-table-columnprop="zip"label="任务完成率"width="140"align="center"><template slot-scope="scope">{{scope.row.projectBreakUpCpmmandList[index].finishrate}}</template></el-table-column></el-table-column></el-table>
// 数据请求getprojectbreakup(filteredFormInline).then((res) => {console.log(res);this.loading = false;if (res.data.length !== 0) {this.tableData = res.data;this.projectBreakUpCpmmandList = res.data[0];} else {this.tableData = [];this.projectBreakUpCpmmandList = [];}
});

相关文章:

el-table实现静态和动态合并单元格 以及内容显示的问题

实现效果图 <el-tablev-loading"loading":data"tableData"style"width: 100%":row-class-name"tableRowClassName"size"small"><el-table-column fixed label"序号" width"50"><el-tab…...

STM32F40X系列FSMC8路驱动LCD显示屏(LY-TFT30-39P-1509 芯片hx8352)

hx8352_8080_8bit_FMSC板级驱动 1.LCD相关1.1LCD参数1.2 LCD引脚1.3 LCD实物1.4 LCD引脚解释 2.接线关系3.STM32F40x基于FMSC16bit修改1)地址偏移2)删除多余GPIO3)修改FMSC的配置4&#xff09;LCD初始化寄存器 3.板驱动程序4.运行结果 1.LCD相关 1.1LCD参数 LCD控制芯片&…...

小象课堂在线授课教育系统

此项目包含后端全部代码&#xff0c;前端包括后台和web界面的源码&#xff0c;数据库用的mysql,可当作课设或者毕设&#xff0c;还可写入自己的简历中 web界面展示&#xff1a; 前端后台界面展示&#xff1a; 用户管理 课程管理 内容配置 订单管理 系统管理 系统监控...

Android 电池容量获取

Android 原生设置电池容量是在 power_profile.xml 中配置&#xff0c;此文件默认在 frameworks 目录下&#xff0c;也可能有 overlay 目录文件。 <!-- This is the battery capacity in mAh (measured at nominal voltage) --><item name"battery.capacity"…...

无涯教程-Perl - tell函数

描述 此函数返回指定FILEHANDLE中读取指针的当前位置(以字节为单位)。如果省略FILEHANDLE,则它将返回上次访问的文件中的位置。 语法 以下是此函数的简单语法- tell FILEHANDLEtell返回值 此函数以字节为单位返回当前文件位置。 例 以下是显示其基本用法的示例代码,要检…...

【论文综述】Transformer 综述

中国科学院、东南大学等联合发表最新的视觉 Transformer 综述_中科院AI算法工程师的博客-CSDN博客 Transformer综述大全&#xff08;1&#xff09;【A Survey of Visual Transformers】_香博士的博客-CSDN博客 Transformer综述大全&#xff08;2&#xff09;【A Survey of Vi…...

博客摘录「 佛祖保佑,永无bug——springboot启动图案的修改方法」2023年6月8日

挺有意思的。佛祖保佑永无BUG 神兽护体 代码注释(各种版本)_风流 少年的博客-CSDN博客...

【JavaEE进阶】SpringBoot 日志

文章目录 一. 日志有什么用?二. 自定义日志打印1. 日志的使用与打印 三. 日志级别1. 日志级别有什么用?2. 日志级别的分类及使用 四. 日志持久化五. 更简单的日志输出---Lombok1. Lombok的使用2. lombok原理解释2.1 Lombok更多注解说明 一. 日志有什么用? 在Java中&#xf…...

conda - 调研介绍

介绍: conda 是一个工具, 也是一个可执行命令, 其核心功能是管理包与环境. conda 支持多种语言, 用来管理Python包是绰绰有余的. 这里注意区分conda和pip, pip命令可以在任何环境中安装Python包, 而conda则是在conda环境中安装任何语言包. 接触过的conda主要有miniconda与anac…...

keepalived集群

keepalived概述 keepalived软件就是通过vrrp协议来实现高可用功能。 VRRP通信原理 VRRP就是虚拟路由冗余协议&#xff0c;它的出现就是为了解决静态路由的单点故障。 VRRP是通过一种竞选一种协议机制来将路由交个某台VRRP路由器。 VRRP 用IP多播的方式&#xff08;多播地…...

CentOS系统环境搭建(八)——CentOS7开机自动执行脚本(以MySQL为例)

CentOS7开机自动执行脚本 文章目录 CentOS7开机自动执行脚本第一步&#xff1a;新建一个脚本run.sh第二步&#xff1a;脚本添加可执行权限第三步&#xff1a;执行如下命令将/etc/rc.d/rc.local文标记为可执行文件第四步&#xff1a;打开/etc/rc.d/rc.local文件&#xff0c;在最…...

re学习(31)BUUCTF-xx(多层加密)

参考文章&#xff1a;【BUUCTF逆向 [2019红帽杯]xx】_nb_What_DG的博客-CSDN博客 re学习笔记&#xff08;26&#xff09;BUUCTF-re-[2019红帽杯]xx_Forgo7ten的博客-CSDN博客 还有B站 水番正文 IDA64位载入 shiftF12查看字符串 交叉引用找到关键代码 使用findcrypt插件找到…...

HDFS的小文件影响及解决办法

Hadoop Distributed File System (HDFS) 是用于存储和处理大规模数据的分布式文件系统。然而,HDFS 中的小文件可能会对系统性能和资源利用产生一些影响。下面是小文件对HDFS的影响以及处理方法的一些信息: 影响: 元数据开销: HDFS中的每个文件和目录都有相关的元数据(文件…...

【前端】husky 的使用

husky 是一个优化 git hooks 的 npm 库 Modern native Git hooks made easy 安装和使用 1.安装 npm install husky --save-dev 2. 初始化 npx husky install&#xff1b;官方文档的写法是在 package.json 中初始化&#xff0c;本质上还是执行了 npx husky install 指令 3. 添加…...

Spring系列篇 -- Bean的生命周期

目录 经典面试题目&#xff1a; 一&#xff0c;Bean的生命周期图 二&#xff0c;关于Bean的生命周期流程介绍&#xff1a; 三&#xff0c;Bean的单例与多例模式 总结&#xff1a; 前言&#xff1a;今天小编给大家带来的是关于Spring系列篇中的Bean的生命周期讲解。在了解B…...

分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测

分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测 目录 分类预测 | MATLAB实现BO-BiGRU贝叶斯优化双向门控循环单元多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.Matlab实现BO-BiGRU贝叶斯优化双向门控循环单元多特征分…...

Linux权限系列--给普通用户添加某个命令的sudo权限

原文网址&#xff1a;Linux权限系列--给普通用户添加某个命令的sudo权限_IT利刃出鞘的博客-CSDN博客 简介 说明 本文介绍Linux系统如何给普通用户添加某个命令的sudo权限。 使用场景 普通开发者可能需要sudo的命令&#xff1a; apt-get&#xff08;经常要安装软件&#x…...

11-数据结构-栈和队列的应用(C语言)

栈和队列的应用 目录 栈和队列的应用 一、括号匹配&#xff08;栈&#xff09; 二、表达式的各种转换 (1)中缀转后缀(手工) (2)后缀转中缀表达式(手工) (3)中缀转后缀(栈) (4)中缀转后缀&#xff08;树&#xff09; (5)后缀表达式求值 (6)中缀表达式求值&#xff08;栈…...

uni-app自定义多环境配置,动态修改appid

背景 在企业级项目开发中&#xff0c;一般都会分为开发、测试、预发布、生产等多个环境&#xff0c;在工程化中使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题&#xff0c;比如接口请求地址&#xff0c;不同环境的请求路径前缀都是不同的。在使用uni-…...

04 - 分离头指针情况、理解HEAD和branch

查看所有文章链接&#xff1a;&#xff08;更新中&#xff09;GIT常用场景- 目录 文章目录 1. 分离头指针2. HEAD和branch2.1 branch的一些操作2.2 HEAD 1. 分离头指针 分离头指针detached HEAD是一种HEAD指针指向了某一个具体的 commit id&#xff0c;而不是分支的情况。 切换…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

Golang——6、指针和结构体

指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

2.3 物理层设备

在这个视频中&#xff0c;我们要学习工作在物理层的两种网络设备&#xff0c;分别是中继器和集线器。首先来看中继器。在计算机网络中两个节点之间&#xff0c;需要通过物理传输媒体或者说物理传输介质进行连接。像同轴电缆、双绞线就是典型的传输介质&#xff0c;假设A节点要给…...