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

el-table根据指定字段合并行和列+根据屏幕高度实时设置el-table的高度

文章目录

  • html代码
  • script代码
  • arraySpanMethod.js代码

html代码

<template><div class="rightBar"><cl-table ref="tableData"border :span-method="arraySpanMethod" :data="tableData" :columns="columns":max-height="maxHeight" row-key="id" cell-default></cl-table></div>
</template>

script代码

import arraySpanMethod from '@/mixin/arraySpanMethod'
export default{mixins: [arraySpanMethod],data(){//表格数据tableData: [],maxHeight: 500,columns:[{label: "业务大类",prop: "busi",align: "center",render: (vn, row, index) => {return (<div>{row.busi && <span>{row.busi}</span>}{!row.busi && <span style="color:#cccccc">--</span>}</div>)}},{label: "业务细类",prop: "busiDetail",align: "center",render: (vn, row, index) => {return (<div>{row.busiDetail && <span>{row.busiDetail}</span>}{!row.busiDetail && <span style="color:#cccccc">--</span>}</div>)}},]},watch: {tableData: {deep: true,immediate: true,handler: function (val) {if (val.length) {this.$nextTick(() => {// 调用this.mergeCell需要满足两个条件:1.tableData数据改变 2.dom渲染完成// this.mergeCell(a,b,c,d)// a-table的节点 b-要合并的字段 c-行相同合并 d-列相同合并var ss = this.mergeCell(this.$refs.tableData, ['busi', 'busiDetail'], true, true)this.mergeMap = ss})}}}},methods:{// 根据屏幕的高度 实时更新table的高度resize() {this.$nextTick(() => {this.maxHeight = this.$refs['rightBar'].clientHeight - 140})},},//生命周期 - 挂载完成(可以访问DOM元素)mounted() {this.resize();window.addEventListener('resize', this.resize)},// 销毁监听事件destroyed() {window.removeEventListener('resize', this.resize)},
}

arraySpanMethod.js代码

// 合并单元格
export default {data() {return {mergeMap: []}},methods: {arraySpanMethod({ rowIndex, columnIndex }) {var map = this.mergeMaptry {var r = map[rowIndex][columnIndex]return r} catch (error) {return r}},mergeCell(table, colMap, isSpanRow = true, isSpanCol = true) {var list = table.data// table.tableData 中 每行的数据是一个对象,不能直接的反应显示的顺序// 即你不能知道第一列右则的列是那个.// 需要通过table.columns建立显示的顺序var columns = []for (const item of table.columns) {columns.push(item.prop)}// 结果应是一个二维数组// 先充填数据,使用其成为全显示的数组var result = []for (let row = 0, rowLen = list.length; row < rowLen; row++) {const ss = []for (let col = 0, colLen = columns.length; col < colLen; col++) {ss.push([1, 1])}result.push(ss)}// 合并行if (isSpanRow) {result = this.mergeRow(list, columns, colMap, result)}// 合并列if (isSpanCol) {result = this.mergeCol(list, columns, colMap, result)}return result},mergeRow(list, columns, colMap, result) {for (const item of colMap) {const p = {colKey: item,col: columns.indexOf(item),row: 0,val: ''}for (let row = 0, rowLen = list.length; row < rowLen; row++) {if (p.val === list[row][p.colKey]) {result[p.row][p.col][0] += 1result[row][p.col][0] = 0} else {p.row = rowp.val = list[row][p.colKey]}}}return result},mergeCol(list, columns, colMap, result) {for (let row = 0, rowLen = list.length; row < rowLen; row++) {const p = {col: 0,row: row,val: ''}for (let col = 0, colLen = columns.length; col < colLen; col++) {if (!colMap.includes(columns[col])) {p.col = colp.val = list[row][columns[col]]continue}if (p.val === list[row][columns[col]]) {result[p.row][p.col][1] += 1result[p.row][col][1] = 0} else {p.col = colp.val = list[row][columns[col]]}}}return result}}
}

相关文章:

el-table根据指定字段合并行和列+根据屏幕高度实时设置el-table的高度

文章目录 html代码script代码arraySpanMethod.js代码 html代码 <template><div class"rightBar"><cl-table ref"tableData"border :span-method"arraySpanMethod" :data"tableData" :columns"columns":max-…...

图像处理 之 凸包和最小外围轮廓生成

“ 最小包围轮廓之美” 一起来欣赏图形之美~ 1.原始图片 男人牵着机器狗 2.轮廓提取 轮廓提取 3.最小包围轮廓 最小包围轮廓 4.凸包 凸包 5.凸包和最小包围轮廓的合照 凸包和最小包围轮廓的合照 上述图片中凸包、最小外围轮廓效果为作者实现算法生成。 图形几何之美系列&#…...

萤石设备视频接入平台EasyCVR私有化视频平台视频监控系统的需求及不同场景摄像机的选择

在现代社会&#xff0c;随着安全意识的提高和技术的进步&#xff0c;安防监控视频系统已成为保障人们生活和财产安全的重要工具。EasyCVR安防监控视频系统&#xff0c;以其先进的网络传输技术和强大的功能&#xff0c;为各种规模的项目提供了一个高效、可靠的监控解决方案。以下…...

网络安全之接入控制

身份鉴别 ​ 定义:验证主题真实身份与其所声称的身份是否符合的过程&#xff0c;主体可以是用户、进程、主机。同时也可实现防重放&#xff0c;防假冒。 ​ 分类:单向鉴别、双向鉴别、三向鉴别。 ​ 主题身份标识信息:密钥、用户名和口令、证书和私钥 Internet接入控制过程 …...

Sqlite: Java使用、sqlite-devel

这里写目录标题 一、简介二、使用1. Java项目中&#xff08;1&#xff09;引入驱动&#xff08;2&#xff09;工具类&#xff08;3&#xff09;调用举例 2. sqlite-devel in linuxsqlite-devel使用 三、更多应用1. 数据类型2. 如何存储日期和时间3. 备份 一、简介 非常轻量级&…...

京东面试题目分享

话不多说&#xff0c;直接上问题 一面&#xff08;视频面&#xff09; 1小时30分钟 1、类加载机制概念、加载步骤、双亲委托机制、全盘委托机制、类加载器种类及继承关系 2、如何实现让类加载器去加载网络上的资源文件&#xff1f;怎么自定义类加载器&#xff1f;自定义的加…...

STM32 使用 STM32CubeMX HAL库实现低功耗模式

STM32 使用 HAL 库的低功耗模式测试使用 ...... 矜辰所致前言 上次画了一个 STM32L010F4 最小系统的板子&#xff0c;也做了一些基本测试&#xff0c;但是最重要的低功耗一直拖到现在&#xff0c;以前在使用 STM32L151 的时候用标准库做过低功耗的项目&#xff0c;现在都使…...

技术美术百人计划 | 《2.1 色彩空间介绍》笔记

总览 一、色彩发送器 色彩认知&#xff1a; 光源是出生点&#xff0c;光源发射出光线&#xff0c;光线通过直射反射折射等路径最终进入人眼。 但人眼接收到光线后&#xff0c;人眼的细胞产生了一系列化学反应。 由此把产生的信号传入大脑&#xff0c;最终大脑对颜色产生了认…...

如何在 Ubuntu 上安装 Mosquitto MQTT 代理

如何在 Ubuntu 上安装 Mosquitto MQTT 代理 Mosquitto 是一个开源的消息代理&#xff0c;实现了消息队列遥测传输 (MQTT) 协议。在 Ubuntu 22.04 上安装 MQTT 代理&#xff0c;您可以利用 MQTT 轻量级的 TCP/IP 消息平台&#xff0c;该平台专为资源有限的物联网 (IoT) 设备设计…...

css使用弹性盒,让每个子元素平均等分父元素的4/1大小

css使用弹性盒&#xff0c;让每个子元素平均等分父元素的4/1大小 原本&#xff1a; ul {padding: 0;width: 100%;background-color: rgb(74, 80, 62);display: flex;justify-content: space-between;flex-wrap: wrap;li {/* 每个占4/1 */overflow: hidden;background-color: r…...

设计模式的学习思路

学习设计模式确实需要一定的时间和实践&#xff0c;尤其是对于刚入门的人来说&#xff0c;因为一开始可能会感到有些混淆&#xff0c;尤其是当多个设计模式看起来有相似之处时。本博客是博主学习设计模式的思路历程&#xff0c;大家可以一起学习进步。设计模式学习-CSDN博客 1…...

stereopy 查看 data.tl 的可用属性

为了查看 data.tl 的可用属性,您可以使用 Python 的内置函数,例如 dir() 或 vars(),具体操作如下: 1. 列出 data.tl 的所有属性 使用 dir() 来查看所有可用的属性和方法: # 列出所有属性 print(dir(data.tl))这将返回一个列表,包含所有可用的方法、属性和内部字段。 2.…...

【2024APMCM亚太杯A题】详细解题思路

A题 复杂场景下的水下图像增强研究 解题思路问题一图像统计分析技术一、检测 偏色 的技术二、检测 弱光 的技术三、检测 模糊 的技术 聚类算法 问题二问题三问题四完整论文与代码 解题思路 问题一 问题 1&#xff1a;请使用类似上文提到的图像统计分析技术&#xff0c;对附件 …...

用 React18 构建Tic-Tac-Toe(井字棋)游戏

下面是一个完整的 Tic-Tac-Toe&#xff08;井字棋&#xff09;游戏的实现&#xff0c;用 React 构建。包括核心逻辑和组件分离&#xff0c;支持两人对战。 1. 初始化 React 项目&#xff1a; npx create-react-app tic-tac-toe cd tic-tac-toe2.文件结构 src/ ├── App.js…...

数据结构及算法--排序篇

在 C 语言中&#xff0c;可以通过嵌套循环和比较运算符来实现常见的排序算法&#xff0c;比如冒泡排序、选择排序或插入排序 目录 基础算法&#xff1a; 1.冒泡排序&#xff08;Bubble Sort&#xff09; 2.选择排序&#xff08;Selection Sort&#xff09; 3.插入排序&…...

泷羽sec学习打卡-网络七层杀伤链1

声明 学习视频来自B站UP主 泷羽sec,如涉及侵权马上删除文章 笔记的只是方便各位师傅学习知识,以下网站只涉及学习内容,其他的都与本人无关,切莫逾越法律红线,否则后果自负 关于蓝队基础的那些事儿-Base1 基本的企业网络架构是怎样的呢&#xff1f;高层管理IT管理影子IT中央技术…...

【QT】绘图

个人主页~ 绘图 一、绘图1、基础内容2、绘制形状&#xff08;1&#xff09;线段&#xff08;2&#xff09;矩形&#xff08;3&#xff09;圆形&#xff08;4&#xff09;文本&#xff08;5&#xff09;画笔&#xff08;6&#xff09;画刷 3、绘制图片&#xff08;1&#xff09;…...

vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗

在与main.ts同级下的plugins文件夹&#xff08;如果没有&#xff0c;新建一个&#xff09;下建一个element.js文件&#xff08;名字随便取&#xff09; element.js文件内容如下&#xff1a; import ElementPlus from element-plus export default (app) > {console.log(app…...

Markdown语法说明

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…...

推荐一款专业电脑护眼工具:CareUEyes Pro

CareUEyes Pro是一款非常好用的专业电脑护眼工具&#xff0c;软件小巧&#xff0c;界面简单&#xff0c;它可以自动过滤电脑屏幕的蓝光&#xff0c;让屏幕显示更加的不伤眼&#xff0c;更加舒适&#xff0c;有效保护你的眼睛&#xff0c;可以自定义调节屏幕的色调&#xff0c;从…...

【kafka】Golang实现分布式Masscan任务调度系统

要求&#xff1a; 输出两个程序&#xff0c;一个命令行程序&#xff08;命令行参数用flag&#xff09;和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽&#xff0c;然后将消息推送到kafka里面。 服务端程序&#xff1a; 从kafka消费者接收…...

【JavaEE】-- HTTP

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

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统&#xff0c;支持多语言对话&#xff08;如 中文&#xff0c;英文&#xff0c;日语&#xff09;&#xff0c;语音情感&#xff08;如 开心&#xff0c;悲伤&#xff09;&#x…...

多种风格导航菜单 HTML 实现(附源码)

下面我将为您展示 6 种不同风格的导航菜单实现&#xff0c;每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...

ZYNQ学习记录FPGA(一)ZYNQ简介

一、知识准备 1.一些术语,缩写和概念&#xff1a; 1&#xff09;ZYNQ全称&#xff1a;ZYNQ7000 All Pgrammable SoC 2&#xff09;SoC:system on chips(片上系统)&#xff0c;对比集成电路的SoB&#xff08;system on board&#xff09; 3&#xff09;ARM&#xff1a;处理器…...

算法—栈系列

一&#xff1a;删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...