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

news2024/12/25 23:44:25

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

  <el-table
        v-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-column
          v-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-column
            prop="address"
            label="完成入住(人)"
            width="140"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].checkinfinish
            }}</template>
          </el-table-column>
          <el-table-column
            prop="zip"
            label="回款指标(万元)"
            width="140"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].backamountgoal
            }}</template>
          </el-table-column>
          <el-table-column
            prop="address"
            label="完成回款(万元)"
            width="140"
            align="center"
          >
            <template slot-scope="scope">{{
              scope.row.projectBreakUpCpmmandList[index].backamountfinish
            }}</template></el-table-column
          >
          <el-table-column
            prop="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 = [];
        }
});

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ad+硬件每日学习十个知识点(33)23.8.13 (导出gerber,PCB加工工艺)

文章目录 1.第一次制造输出2.第二次制造输出3.第三次制造输出4.嘉立创加工工艺信息5.PCB板材分类6.PCB的板子厚度和内外层铜厚1.板子厚度2.内外层铜厚 7.什么是PCB喷锡&#xff1f;8.PCB喷锡的主要作用。9.有铅喷锡和无铅喷锡的区别。 1.第一次制造输出 答&#xff1a; 2.…

首批通过!曙光云多款产品通过信通院可信云认证

7月25日&#xff0c;由中国信通院主办的2023可信云大会在北京举行&#xff0c;中科曙光Cloudview云计算操作系统和StackCube-K超融合系统获得可信云首批认证&#xff0c;并分别通过《一云多芯稳定性度量评估模型》增强级要求和《可信云超融合面向信创场景的评估》标准。 为响应…

R语言画图的-- ggplot2(实现图的精细修改)

文章目录 1. theme函数实现图的全局修改2. 图的精确修改3. 其他修改1. 坐标轴的排序&#xff1a;2. 实现一页多图 4. 具体作图中的参数修改(某些特殊的参数)柱状图的参数修改 写在最后 ggplot2是R中用来作图的很强的包&#xff0c;但是其用法比较多且各种参数比较复杂&#xff…

司徒理财:8.15早盘黄金1905多,最新操作建议

黄金昨日虽然再次新低&#xff0c;但是在司徒所强调的1902位置企稳&#xff0c;反弹即将开启&#xff0c;早盘依托1902的支撑低多看涨&#xff0c;1905现价可以直接多&#xff01;黄金本次的下跌已经接近尾声&#xff0c;弱不再弱必转强&#xff01;长时间大幅度的下跌后必将迎…

电脑剪辑用哪个软件比较好?电脑视频剪辑软件分享

在电脑上剪辑视频可以让您更容易地编辑和组织素材&#xff0c;以及添加音频、标题和其他效果。此外&#xff0c;电脑上的剪辑软件通常比手机上的应用程序更强大&#xff0c;使我们可以进行更精细的编辑&#xff0c;并获得更好的最终产品。那么电脑剪辑视频哪个软件比较好用呢&a…

创建maven的Springboot项目出现错误:Cannot access alimaven

创建maven的Springboot项目出现错误&#xff1a;Cannot access alimaven 1&#xff09;问题2) 分析问题3&#xff09;解决问题 1&#xff09;问题 创建maven的Springboot项目出现错误&#xff1a; Cannot access alimaven (http://maven.aliyun.com/nexus/content/groups/p…

开学季电容笔怎么选?iPad第三方电容笔了解下

不少的学生党开学必备清单里都少不了电容笔&#xff0c;可见其的重要性。自从苹果发布了ipad的原装电容笔以来&#xff0c;这款电容笔在目前市面上就一直很受欢迎&#xff0c;不过由于Apple Pencil的售价实在是太贵了&#xff0c;使得大部分人都买不起。于是&#xff0c;市面上…

【LeetCode】242 . 有效的字母异位词

242 . 有效的字母异位词&#xff08;简单&#xff09; 方法&#xff1a;哈希表 思路 首先判断两个字符串长度是否相等&#xff0c;不相等直接返回 false&#xff1b;接下来设置一个长度为26 的哈希表&#xff0c;分别对应26个小写字母&#xff1b;遍历两个字符串&#xff0c;…

【虚幻引擎】UE5数字人的创建

安装插件 在插件里面找到MetaHuman&#xff0c;设置激活&#xff0c;然后重启引擎 找到bridge&#xff0c;并开启&#xff0c;这个需要我们制作完成的metahuman需要在这个插件里下载&#xff0c;unreal5自动安装 创建metahuman 首先添加一个metahuman本体&#xff0c;如果你的插…

log4net使用

一. Log4Net简介 Log4net是从Java中的Log4j迁移过来的一个.Net版的开源日志框架&#xff0c;它的功能很强大&#xff0c;可以将日志分为不同的等级&#xff0c;以不同的格式输出到不同的存储介质中&#xff0c;比如&#xff1a;数据库、txt文件、内存缓冲区、邮件、控制台、ANS…

02.用户信息UserDetails相关入门

1. 前言 前一篇介绍了 Spring Security 入门的基础准备。从这篇开始我们来一步步窥探它是如何工作的。我们又该如何驾驭它。本篇将通过 Spring Boot 2.x 来讲解 Spring Security 中的用户主体UserDetails。以及从中找点乐子。 2. Spring Boot 集成 Spring Security 这个简直…

同比增长近4倍!5G智能座舱爆发

5G智能座舱&#xff0c;正在进入爆发期。 高工智能汽车研究院监测数据显示&#xff0c;2023年1-6月中国市场&#xff08;不含进出口&#xff09;乘用车前装标配5G智能座舱交付63.18万辆&#xff08;含选装&#xff09;&#xff0c;同比增长370.09%。 同时&#xff0c;5G与车载智…

透镜天线的分类、特点及龙伯球透镜天线原理

透镜天线&#xff0c;一种能够通过电磁波&#xff0c;将点源或线源的球面波或柱面波转换为平面波从而获得笔形、扇形或其他形状波束的天线。通过合适设计透镜表面形状和折射率n&#xff0c;调节电磁波的相速以获得辐射口径上的平面波前。透镜天线吸收了许多光信息工程技术&…

蓝牙资讯|苹果智能戒指可以通过多个戒指控制用户界面

近日&#xff0c;美国专利商标局公布了苹果公司的一项专利申请&#xff0c;涉及使用单个或多个智能指环来控制用户界面的各个方面。Apple Vision Pro 使用眼动追踪和摄像头来监控用户手指的空中手势控制 visionOS&#xff0c;就像鼠标使用 Mac 一样&#xff0c;戒指专利有一个明…

问道管理:三大股指触底反弹 AI算力方向再度崛起

周一&#xff0c;受人民币汇率动摇等要素影响&#xff0c;A股三大股指早盘深度回撤&#xff0c;沪指盘中创出1月中旬以来新低。午间休市前后&#xff0c;券商与人工智能板块相继发力&#xff0c;带动股指止跌回升&#xff0c;大盘终究以全天的相对高点报收。 截至14日收盘&…

【微服务技术一】Eureka、Nacos、Ribbon(配置管理、注册中心、负载均衡)

微服务技术一 技术栈图一、注册中心Eureka概念&#xff1a;搭建EurekaServer服务注册服务发现&#xff08;消费者对提供者的远程调用&#xff09; 二、Ribbon负载均衡负载均衡的原理&#xff1a;LoadBalanced负载均衡的策略&#xff1a;IRule懒加载 三、Nacos注册中心Nacos的安…

国内芯片厂商创新突破,助力国产替代持续加速

近日&#xff0c;中商产业研究院发布最新研究报告显示&#xff0c;今年1~5月份中国进口集成电路为1865亿件&#xff0c;同比下降19.6%&#xff0c;同比去年5个月累计少进口了455亿颗&#xff0c;平均每天少进口3亿颗。与此同时&#xff0c;英特尔、AMD、美光、三星、SK海力士等…

面试题解析 | 为什么Redis使用单线程性能会优于多线程?

大家好&#xff0c;我是小米&#xff01;今天我要和大家聊一个有关Redis的热门面试题&#xff1a;为什么Redis使用单线程性能会优于多线程&#xff1f;相信这个问题在很多同学心中都曾经纠结过&#xff0c;那么接下来&#xff0c;就让我们一起来揭开这个技术之谜吧&#xff01;…

flac格式如何转mp3?简单的音频格式转换方法分享

FLAC格式音频的缺点主要在于文件大小较大&#xff0c;相比于MP3和AAC等有损压缩格式&#xff0c;FLAC的压缩率较低&#xff0c;因此占用的存储空间更多。此外&#xff0c;由于FLAC格式相对较新&#xff0c;不是所有的音频设备都支持该格式。那么我们怎么将FLAC格式音频转成MP3格…

python质检工具(pylint)安装使用总结

1、Pylint Pylint工具主要类似java中的checkStyle和findbugs,是检查代码样式和逻辑规范的工具。 1.1、Pylint安装流程: 打开PyCharm软件,打开如图1.1所示Terminal终端窗口,先查看python版本和pip版本,pip是19.0.3,python是2.7 图1.1 运行pip install pylint安装pylin…