当前位置: 首页 > 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;而不是分支的情况。 切换…...

C#__基本特性和使用

// 特性&#xff08;attribute&#xff09;: // 一种允许我们向程序集添加元数据的语言结构 // 用于保存程序结构信息的某种特殊类型的类 // 类似“批注”&#xff0c;用于解释说明 #define IsShowMessage // 宏定义&#xff0c;在开头定义&#xff0…...

mysql(3)

分库分表 分库&#xff1a;将数据库中的数据分散到不同数据库上&#xff0c;可以垂直分库和水平分库。 1.垂直分库&#xff1a;把单一的数据按照业务进行划分&#xff0c;不同的业务使用不同的数据库&#xff0c;进而将一个数据库的压力分散到多个数据库。 2.水平分库&#…...

阿里巴巴常用的12个后端开发工具

1 阿尔萨斯Java在线诊断工具 Arthas是一款用于Java应用程序的在线诊断工具&#xff0c;由阿里巴巴于2018年9月开源。 典型场景&#xff1a; 您不知道从中加载类的特定JAR包。 您想弄清楚为什么您的系统会抛出各种与类相关的异常。 您不知道为什么修改后的代码无法执行。您不…...

php base64转图片保存本地

调用函数 public function base64(){$img $this->request->param(img);$img data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy…...

unity物体移动至指定位置

物体坐标与物体移动 世界坐标与局部坐标之间的转换物体移动至指定位置需求思路注意 世界坐标与局部坐标之间的转换 在Unity中&#xff0c;物体的坐标分为局部坐标和世界坐标。 局部坐标是相对于物体的父对象的坐标系&#xff0c;而世界坐标是相对于场景的整体坐标系。 使用tr…...

详解C#-static void Main(string[] args)

目录 简介: 举例: 输出结果:​编辑 总结&#xff1a; 简介: 在C#中static void Main(string[] args)这个句话有什么作用&#xff0c;分别代表什么意思&#xff01;&#xff01; 这句话是入口函数的声明&#xff0c;指定了C#程序的入口点&#xff0c;并定义了一个名为”Mai…...

中大许少辉博士《乡村振兴战略下传统村落文化旅游设计》中国建筑工业出版社八一付梓。

中大许少辉博士《乡村振兴战略下传统村落文化旅游设计》中国建筑工业出版社八一付梓。...

Matplotlib数据可视化(五)

目录 1.绘制折线图 2.绘制散点图 3.绘制直方图 4.绘制饼图 5.绘制箱线图 1.绘制折线图 import matplotlib.pyplot as plt import numpy as np %matplotlib inline x np.arange(9) y np.sin(x) z np.cos(x) # marker数据点样式&#xff0c;linewidth线宽&#xff0c;li…...

Python爬虫——requests_post请求

import requests import jsonurl https://fanyi.baidu.com/sugheaders {User-Agent: ,Cookie: }data {kw: hello }response requests.post(url, data, headersheaders)content response.textobj json.loads(content.encode(utf-8)) print(obj)总结&#xff1a; post请求…...

excel 下载方法封装

1.首先需要拿到后端返回的URL下载地址 2.写个下载方法 // url 接口返回的下载地址。例如&#xff1a;https://cancer-research.oss-cn-beijing.aliyuncs.com/yuance-platform-permission/校内共享数据导入模板.xlsx // name 文件名称 例如&#xff1a; 校内共享数据导入模板 /…...