表格固定行固定列问题

效果图

代码:

1.第一部分:表格固定行:用合计行来实现

<el-table
     class="fixedRowcol"
    :data="tableData"
    border
    show-summary
    sum-text="合计"
    ref="table"></el-table>

2.第二部分:表格固定列加按钮,watch实现

watch: {
        tableData() {
            let _this = this;
            this.$nextTick(() => {
	            console.log(_this.$refs.table.$refs);
           	    let html = _this.$refs.table.$refs.rightFixedFooterWrapper
	            .querySelector(".el-table__footer")
	            .querySelectorAll("td")[6]
	            .querySelector(".cell");
	
	             html.innerHTML = "<el-button>查看</el-button>";
	             html.onclick = () => {}
            });
        },
},

3.第三部分:style样式修改(根据element-ui table的各个部分实现方式,层级结构)

:deep(.el-table.fixedRowcol) {
	    display: flex;
   	    flex-direction: column;
   	    .el-table__body-wrapper{
		    order: 1;
		    height: calc(100% - 76px) !important;
	    }
    	.el-table__footer-wrapper{
		    min-height: 32px;
		    display: flex !important;
      		td.el-table__cell{
			    div{
          		    white-space: nowrap;
			    }
      		}
    	}
	    .el-table__fixed-body-wrapper {
		    top: 76px !important;
		    height: calc(100% - 76px) !important;
   	    }
	    .el-table__fixed-footer-wrapper {
		    display: block !important;
		    z-index: 4;
		    top: 42px !important;
		    td.el-table__cell{
			    div{
            	    white-space: nowrap;
			    }
            }
        }
}

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

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

相关文章

Docker 【通过Dockerfile构建镜像】【docker容器与镜像的关系】

文章目录 前言一、前期的准备工作二、上手构建一个简单的镜像三、DcokerFile1 指令总览2 指令详情 四、Dockerfile文件规范五、docker运行build时发生了什么?六、调试手段1. 修改镜像打包后&#xff0c;如何验证新内容已更新至镜像 七、Dockerfile优化方案 前言 docker构建镜…

【Spark编程基础】实验三RDD 编程初级实践(附源代码)

目录 一、实验目的二、实验平台三、实验内容1.spark-shell 交互式编程2.编写独立应用程序实现数据去重3.编写独立应用程序实现求平均值问题 一、实验目的 1、熟悉 Spark 的 RDD 基本操作及键值对操作&#xff1b; 2、熟悉使用 RDD 编程解决实际具体问题的方法 二、实验平台 …

burpsuit教程汉化+Repeater(非常详细),从零基础入门到精通,看完这一篇就够了

前言&#xff1a;释疑解惑 《BP使用教程一》发布后&#xff0c;后台收到了许多小伙伴的私信问BP是怎么汉化的&#xff0c;在这里统一为大家解答一下。 BP的汉化依赖于汉化jar包&#xff0c;在启动时引入汉化包即可&#xff0c;废话不多说&#xff0c;直接上命令&#xff1a; …

MySQL:基础篇

一、数据库概述 基本概念 RDBMS&#xff08;关系型数据库&#xff09;和非DBMS对比 RDBMS 实质&#xff1a; 优势&#xff1a; 非DBMS 介绍&#xff1a; 类型&#xff1a; RDBMS设计规则 表、字段、记录 表之间的关联关系 1、一对一 2、一对多 3、多对多 4、自我引用 二、…

Linux网络编程: TCP协议首部与可选项简述

一、TCP/IP五层模型 物理层&#xff08;Physical Layer&#xff09;&#xff1a;物理层是最底层&#xff0c;负责传输比特流&#xff08;bitstream&#xff09;以及物理介质的传输方式。它定义了如何在物理媒介上传输原始的比特流&#xff0c;例如通过电缆、光纤或无线传输等。…

蓝桥杯 第3217题 简单的异或难题 C++ Java Python

题目 思路和解题方法 计算给定数组中子数组异或和的问题。它采用了前缀异或的方法来预处理数组&#xff0c;然后对于每个查询&#xff0c;通过异或操作计算子数组的异或和。 读取输入的数组&#xff0c;并计算每个位置的前缀异或和。对于每个查询&#xff0c;读取查询的左右边界…

有哪些好用的客户管理软件?这5款系统好在哪里?

问题链接&#xff1a;有哪些客户管理比较好的软件&#xff1f; - 知乎 从题主的描述来看&#xff0c;问题主要聚集在客户信息管理、销售流程管理、客户优先级管理这几大方面&#xff0c;再回答这个问题之前&#xff0c;我们要先明确几个问题。比如&#xff0c;客户对企业的重要…

蓝桥杯--错误票据

求解答&#xff0c;不知道出现什么问题(虽然知道自己写的挺麻烦的&#xff0c;但是孩子能写出来就不容易了&#xff09; public class top2 {//错误票据public static void main(String[] args){Scanner scannernew Scanner(System.in);int wscanner.nextInt();String []snew S…

uniapp 开发微信小程序 出现启用组件按需注入问题如何解决

问题描述 在使用uniapp 开发微信小程序&#xff0c;进行上架发布时 代码质量栏 出现启用组件按需注入问题。 虽然现实代码上传成功&#xff0c;但是作为一个吹毛求疵的老猿人&#xff0c;肯定是无法容忍的。那么如何解决呢&#xff1f; 问题解决方案 在uniapp端&#xff0c…

GDB界面调试CGDB快速上手

什么是 CGDB&#xff1f; CGDB 是一个基于 GNU Debugger&#xff08;GDB&#xff09;的 Curses&#xff08;字符用户界面&#xff09;前端。它提供了一个类似于文本编辑器的界面&#xff0c;可以帮助用户更轻松地执行调试操作&#xff0c;而无需离开终端。 安装 CGDB 首先&a…

【鸿蒙HarmonyOS开发笔记】通知模块之发布进度条类型通知

概述 进度条通知也是常见的通知类型&#xff0c;主要应用于文件下载、事务处理进度显示。HarmonyOS提供了进度条模板&#xff0c;发布通知应用设置好进度条模板的属性值&#xff0c;如模板名、模板数据&#xff0c;通过通知子系统发送到通知栏显示。 目前系统模板仅支持进度条…

HarmonyOS定时器与定时任务

HarmonyOS 的 ArkTS 说白了 就是 TS和JS混合 加了一些新特性的语言 定时任务 就还是用 js代码就OK了 我们代码这样写 Entry Component struct Twox {build() {Row() {Column(){Button("触发定时任务").onClick(()>{setTimeout(()> {console.log(执行)},2000…

【毕设级项目】基于ESP8266的家庭灯光与火情智能监测系统——文末源码及PPT

目录 系统介绍 硬件配置 硬件连接图 系统分析与总体设计 系统硬件设计 ESP8266 WIFI开发板 人体红外传感器模块 光敏电阻传感器模块 火焰传感器模块 可燃气体传感器模块 温湿度传感器模块 OLED显示屏模块 系统软件设计 温湿度检测模块 报警模块 OLED显示模块 …

LoRa模块在野外科研与环境保护中的角色:科技守护自然之宝

随着科技的不断发展&#xff0c;LoRa&#xff08;低功耗广域网&#xff09;模块在野外科研与环境保护中正发挥着越来越重要的作用。其卓越的通信能力、低功耗特性以及良好的穿透能力&#xff0c;为科学家和环保人士提供了一种先进的技术手段&#xff0c;有助于更深入、更全面地…

MAC IntelliJ IDEA搭建Doris Fe

目录 版本信息 安装环境依赖 拉取源码 下载 Doris 编译依赖 修改系统最大文件句柄数 编译 Doris 配置 Debug 环境 生成 FE 代码 FE模块代码导入 配置 Debug FE 启动 FE 报错问题 版本信息 本次安装的doris版本信息为doris-2.1.0-rc11 IntelliJ IDEA 配置jdk17、m…

优雅的 Markdown

Markdown浅尝 一、勾选框 注意[]前后都要有空格 - [x] 干的漂亮 - [x] 吃饭 - [x] 写代码 - [ ] 睡觉 干的漂亮 吃饭 写代码 睡觉 二、列表 #无序列列表 * 换成 - 也行 * 你 * 你好 * 你好呀 - 你很好啊 你你好你好呀你很好啊 #有序列表 . 后面有个空格 1. 我 2. 是我 3.…

Spring MVC开发小练习

1. 加法计算器 需求&#xff1a;输入两个整数&#xff0c;计算和 约定前后端交互接口&#xff1a; 在开发项目前&#xff0c;根据需求先约定好前后端交互接口&#xff0c;双方按照接口文档进行开发&#xff0c;接口文档一旦写好&#xff0c;尽量不要轻易改变&#xff0c;如果…

python大学生健身爱好者交流网站flask-django-nodejs-php

任何系统都要遵循系统设计的基本流程&#xff0c;本系统也不例外&#xff0c;同样需要经过市场调研&#xff0c;需求分析&#xff0c;概要设计&#xff0c;详细设计&#xff0c;编码&#xff0c;测试这些步骤&#xff0c;基于python技术、django/flask框架、B/S机构、Mysql数据…

全面:vue.config.js 的完整配置

vue.config.js是Vue项目的配置文件&#xff0c;用于配置项目的构建、打包和开发环境等。 在Vue CLI 3.0之后&#xff0c;项目的配置文件从原来的build和config目录下的多个配置文件&#xff0c;合并成了一个vue.config.js文件。这个文件可以放在项目的根目录下&#xff0c;用于…

借还款管理神器,高效记录借还款信息,让财务明细不再遗漏

在快节奏的现代生活中&#xff0c;借还款管理成为我们日常财务处理的重要一环。无论是个人生活还是企业运营&#xff0c;都需要一个高效、准确、便捷的方式来记录和追踪借还款信息。传统的记账方式往往容易出错、繁琐且耗时&#xff0c;难以满足现代人的需求。现在&#xff0c;…