网站建设经费预算计划/seddog站长之家

网站建设经费预算计划,seddog站长之家,产品设计创意图片,腾讯如何做网站el-table树形表格合并相同的值 el-table树形表格合并相同的值让Ai进行优化后的代码 el-table树形表格合并相同的值 <style lang"scss" scoped> .tableBox {/deep/ &.el-table th:first-child,/deep/ &.el-table td:first-child {padding-left: 0;} } …

el-table树形表格合并相同的值

  • el-table树形表格合并相同的值
  • 让Ai进行优化后的代码

在这里插入图片描述

el-table树形表格合并相同的值

<style lang="scss" scoped>
.tableBox {/deep/ &.el-table th:first-child,/deep/ &.el-table td:first-child {padding-left: 0;}
}
</style>
<template><div><el-tableclass="tableBox"row-key="uniID"ref="refTable":data="tableData"style="width: 100%"border:span-method="arraySpanMethod":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="dateTime" label="时间" key="dateTime" min-width="140"><template slot-scope="{ row }">{{ row.groupNo ? findValue(row.groupNo, groupNoList) : row.dateTime }}</template></el-table-column><el-table-column prop="yieldConsume" label="产量(t)" key="yieldConsume" min-width="110" /></el-table></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';interface TableRow {uniID: number;dateTime: string;groupNo: number | null;yieldConsume: number;children?: TableRow[];parent?: TableRow | null;
}@Component({})
export default class EnergyAnalysis extends Vue {private tableData: TableRow[] = [];private groupNoList: any = [{value: '甲',key: 1,},{value: '乙',key: 2,},{value: '丙',key: 3,},{value: '丁',key: 4,},];private testData = {data: {everyDetail: [{dateTime: '2025-03-01',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-01',groupNo: 1,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 1,yieldConsume: -18885.714,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 101,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 102,children: null,},],},{dateTime: '2025-03-02',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-02',groupNo: 1,yieldConsume: 111,children: null,},],},],},};created() {this.statisticsQuery();}private findValue(data: any, list: any) {const a = list.find((el: any) => el.key === data);return a ? a.value : '-';}private async statisticsQuery() {let index = 1;// 递归函数将原始数据转换为包含父子关系的TableRow对象数组const recursionList = (list: any[], parent: TableRow | null = null): TableRow[] => {return list?.map((v: any) => {const newRow: TableRow = {...v,uniID: index++,parent: parent,};if (v.children) {newRow.children = recursionList(v.children, newRow);}return newRow;});};const data = this.testData;// 处理成表格所需的格式this.tableData = recursionList(data.data?.everyDetail);this.$nextTick(() => {(this.$refs as any).refTable.doLayout();});}/*** arraySpanMethod 方法用于定义表格中的单元格合并规则。* 此方法接收一个参数，该参数包含当前行和列的信息，包括 row、column、rowIndex 和 columnIndex。** @param {Object} param - 包含当前行和列信息的对象。* @param {TableRow} param.row - 当前行的数据对象。* @param {VueTableColumn} param.column - 当前列的信息对象。* @param {number} param.rowIndex - 当前行的索引。* @param {number} param.columnIndex - 当前列的索引。** 此方法特别处理了第一列（即时间列）的单元格合并逻辑：* 如果当前行的 `groupNo` 不为空，则检查其是否与兄弟节点有相同的 `groupNo` 值，* 若相同则进行单元格合并。否则返回默认的合并值（即不合并）。*/private arraySpanMethod({ row, column, rowIndex, columnIndex }: any) {// 仅对第一列应用合并逻辑if (columnIndex === 0) {// 如果当前行有 `groupNo` 值if (row.groupNo != null) {const parent = row.parent; // 获取父级数据对象if (parent && parent.children) {// 确保存在父级及子节点列表const siblings = parent.children; // 子节点列表const currentIndex = siblings.findIndex((sib: TableRow) => sib.uniID === row.uniID); // 查找当前行在子节点列表中的位置// 如果找不到当前行的位置，则直接返回默认合并值if (currentIndex === -1) return [1, 1];let count = 1; // 初始化计数器，用于计算需要合并的单元格数量// 遍历后续的兄弟节点，查找具有相同 `groupNo` 的连续单元格for (let i = currentIndex + 1; i < siblings.length; i++) {if (siblings[i].groupNo === row.groupNo) {count++; // 相同 `groupNo` 则计数器加一} else {break; // 遇到不同的 `groupNo` 则停止计数}}// 如果当前行不是第一个具有该 `groupNo` 的行，则不显示此行if (currentIndex > 0 && siblings[currentIndex - 1].groupNo === row.groupNo) {return { rowspan: 0, colspan: 0 }; // 返回0表示不渲染该单元格} else {// 否则，根据计算出的连续相同 `groupNo` 单元格的数量返回合并值return { rowspan: count, colspan: 1 };}}} else {// 对于没有 `groupNo` 的行，返回默认合并值return { rowspan: 1, colspan: 1 };}}// 默认情况下，所有其他列不进行单元格合并return { rowspan: 1, colspan: 1 };}
}
</script>

让Ai进行优化后的代码

注意：以下为Ai生成，暂未测试性能内存等是否真的进行了优化

<style lang="scss" scoped>
.tableBox {/deep/ &.el-table th:first-child,/deep/ &.el-table td:first-child {padding-left: 0;}
}
</style>
<template><div><el-tableclass="tableBox"row-key="uniID"ref="refTable":data="tableData"style="width: 100%"border:span-method="arraySpanMethod":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><el-table-column prop="dateTime" label="时间" key="dateTime" min-width="140"><template slot-scope="{ row }">{{ row.groupNo ? findValue(row.groupNo, groupNoList) : row.dateTime }}</template></el-table-column><el-table-column prop="yieldConsume" label="产量(t)" key="yieldConsume" min-width="110" /></el-table></div>
</template><script lang="ts">
import { Component, Vue } from 'vue-property-decorator';interface TableRow {uniID: number;dateTime: string;groupNo: number | null;yieldConsume: number;children?: TableRow[];parent?: TableRow | null;// 新增预处理字段spanInfo?: {rowspan: number;hidden: boolean;};
}@Component({})
export default class EnergyAnalysis extends Vue {private tableData: TableRow[] = [];private groupNoList: any = [{value: '甲',key: 1,},{value: '乙',key: 2,},{value: '丙',key: 3,},{value: '丁',key: 4,},];private testData = {data: {everyDetail: [{dateTime: '2025-03-01',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-01',groupNo: 1,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 1,yieldConsume: -18885.714,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 100,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 101,children: null,},{dateTime: '2025-03-01',groupNo: 2,yieldConsume: 102,children: null,},],},{dateTime: '2025-03-02',groupNo: null,yieldConsume: -30176.691,children: [{dateTime: '2025-03-02',groupNo: 1,yieldConsume: 111,children: null,},],},],},};created() {this.statisticsQuery();}private findValue(data: any, list: any) {const a = list.find((el: any) => el.key === data);return a ? a.value : '-';}private async statisticsQuery() {let index = 1;const recursionList = (list: any[], parent: TableRow | null = null): TableRow[] => {return list?.map((v: any) => {const newRow: TableRow = {...v,uniID: index++,parent: parent,spanInfo: { rowspan: 1, hidden: false }, // 初始化合并信息};// 预处理子节点的合并信息if (newRow.children) {newRow.children = recursionList(newRow.children, newRow);this.preCalculateSpan(newRow.children); // 关键优化点}return newRow;});};const data = this.testData;this.tableData = recursionList(data.data?.everyDetail);this.$nextTick(() => {(this.$refs as any).refTable.doLayout();});}/*** 预处理合并信息 (核心优化逻辑)* @param children - 子节点列表，包含需要进行合并处理的行数据。*/preCalculateSpan(children: TableRow[]) {let pos = 0; // 当前处理的位置指针while (pos < children.length) {// 遍历所有子节点const current = children[pos]; // 当前处理的行if (current.groupNo == null) {// 如果当前行没有组编号，则跳过pos++;continue;}// 向后查找相同 groupNo 的数量let sameCount = 1; // 初始化相同组编号的数量为1（包括当前行）for (let i = pos + 1; i < children.length; i++) {// 从下一个元素开始查找if (children[i].groupNo === current.groupNo) {// 如果发现相同组编号sameCount++; // 增加计数} else {break; // 一旦遇到不同的组编号，停止查找}}// 更新合并信息current.spanInfo = { rowspan: sameCount, hidden: false }; // 设置当前行为合并起始行for (let j = pos + 1; j < pos + sameCount; j++) {// 对于后续的相同组编号的行children[j].spanInfo = { rowspan: 0, hidden: true }; // 标记这些行为隐藏状态，不需要显示}pos += sameCount; // 移动位置指针，跳过已处理的行}}/*** 合并方法直接使用预处理结果* @param param - 包含 row（当前行数据）、column（当前列配置）、columnIndex（当前列索引）的对象。* @returns 返回一个对象，指定当前单元格的 rowspan 和 colspan。*/arraySpanMethod({ row, column, columnIndex }: any) {// 只对第一列应用合并规则if (columnIndex === 0 && row.spanInfo) {return {rowspan: row.spanInfo.rowspan, // 根据预处理结果设置行跨度colspan: row.spanInfo.hidden ? 0 : 1, // 如果该行被标记为隐藏，则设置 colspan 为 0};}// 默认情况下，每个单元格的 rowspan 和 colspan 都为 1return { rowspan: 1, colspan: 1 };}
}
</script>

在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

DeepSeek + Kimi 自动生成 PPT

DeepSeek + Kimi 自动生成 PPT

可以先用deepseek生成ppt大纲&#xff0c;再把这个大纲复制到Kimi的ppt助手里&#xff1a; https://kimi.moonshot.cn/kimiplus/conpg18t7lagbbsfqksg 选择ppt模板&#xff1a; 点击生成ppt就制作好了。
阅读更多...
Unity 解决TMP_Text 文字显示异常的问题

Unity 解决TMP_Text 文字显示异常的问题

问题 Unity 中TMP_Text 文字显示异常大多可分为两种情况。①制作TMP 字体选用的文本不包含该文字&#xff1b;②制作TMP 字体选用的ttf 源不包含该文字。 第一种情况&#xff0c;制作TMP 字体选用的文本不包含&#xff0c;只需在选用的Charater File 中添加再重新生成即可。 …
阅读更多...
汽车机械钥匙升级一键启动的优点

汽车机械钥匙升级一键启动的优点

汽车机械钥匙升级一键启动的优点主要包括&#xff1a; 便捷性&#xff1a;一键启动功能的引入极大地提升了用车便捷性。车主无需翻找钥匙&#xff0c;只需在车辆感应范围内轻触启动键&#xff0c;即可轻松发动汽车。 安全性&#xff1a;移动管家专车专用一键启动系统配备了防…
阅读更多...
【深度学习量化交易16】触发机制设置——基于miniQMT的量化交易回测系统开发实记

【深度学习量化交易16】触发机制设置——基于miniQMT的量化交易回测系统开发实记

我是Mr.看海&#xff0c;我在尝试用信号处理的知识积累和思考方式做量化交易&#xff0c;应用深度学习和AI实现股票自动交易&#xff0c;目的是实现财务自由~ 目前我正在开发基于miniQMT的量化交易系统——看海量化交易系统。 很多朋友关心回测系统的开发进展&#xff0c;在正式…
阅读更多...
图解AUTOSAR_CP_WatchdogDriver

图解AUTOSAR_CP_WatchdogDriver

AUTOSAR WatchdogDriver模块详解 AUTOSAR MCAL层看门狗驱动模块详细解析 目录 1. 模块概述2. 架构位置 2.1. 组件架构 3. 主要功能4. API接口5. 配置参数 5.1. 配置模型 6. 错误代码7. 状态管理 7.1. 状态机 8. 处理流程 8.1. 活动流程 9. 操作序列 9.1. 典型操作序列 10. 硬件…
阅读更多...
Linux操作系统应用

Linux操作系统应用

Linux操作系统应用 一、用户与用户组管理1.1 管理用户1.1.1 与用户账号相关的文件1.1.2 用户管理命令1.1.3 任务实施 1.2 管理用户组1.2.1 用户组1.2.2 用户组管理命令 1.3 查看用户和用户组状态1.3.1 用户查看命令 id、who、whoami1.3.2 用户身份切换命令 su、sudo 二、文件管…
阅读更多...
拖拽实现+摇杆实现

拖拽实现+摇杆实现

拖拽实现 拖拽事件实现: 半透明渐变贴图在ios设备下&#xff0c;使用压缩会造成图片质量损失&#xff0c;所以可以将半透明渐变UI切片单独制作真彩色图集 拖拽事件组 IBeginDragHandler:检测到射线后&#xff0c;当拖拽动作开始时执行一次回调函数 IDragHandler:拖拽开始后&a…
阅读更多...
xLua_001 Lua 文件加载

xLua_001 Lua 文件加载

xLua下载 1、HelloWrold 代码 using System.Collections; using System.Collections.Generic; using UnityEngine; using XLua; // 引入XLua命名空间 public class Helloworld01 : MonoBehaviour {//声明LuaEnv对象 private LuaEnv luaenv;void Start(){//实例化LuaEnv对象…
阅读更多...
【sql靶场】第18-22关-htpp头部注入保姆级教程

【sql靶场】第18-22关-htpp头部注入保姆级教程

目录 【sql靶场】第18-22关-htpp头部注入保姆级教程 1.回顾知识 1.http头部 2.报错注入 2.第十八关 1.尝试 2.爆出数据库名 3.爆出表名 4.爆出字段 5.爆出账号密码 3.第十九关 4.第二十关 5.第二十一关 6.第二十二关 【sql靶场】第18-22关-htpp头部注入保姆级教程…
阅读更多...
Python----计算机视觉处理（Opencv：形态学变换）

Python----计算机视觉处理（Opencv：形态学变换）

一、形态学变化 形态学变换&#xff08;Morphological Transformations&#xff09;是一种基于形状的图像处理技术&#xff0c;主要处理的对象为二值化图像。 形态学变换有两个输入和一个输出&#xff1a;输入为原始图像和核&#xff08;即结构化元素&#xff09;&#xff0c;输…
阅读更多...
【最新版】智慧小区物业管理小程序源码+uniapp全开源

【最新版】智慧小区物业管理小程序源码+uniapp全开源

一.系统介绍 智慧小区物业管理小程序，包含小区物业缴费、房产管理、在线报修、业主活动报名、在线商城等功能。为物业量身打造的智慧小区运营管理系统，贴合物业工作场景，轻松提高物业费用收缴率，更有功能模块个性化组合，助力物业节约成本高效运营。 二.搭建环境 系统环…
阅读更多...
C++模板进阶

C++模板进阶

目录 非类型模板参数 类模板的特化 分类 函数模板的特化 模板分离编译 问题 解决方法 1&#xff09;不对模板定义进行分离或对模板进行特例化&#xff1b; 2&#xff09;将声明和定义放在同一个文件 总结 关于C模板的使用在《C类和对象》中有介绍&#xff0c;本篇博客…
阅读更多...
停车场停车位数据集，标注停车位上是否有车，平均正确识别率99.5％，支持yolov5-11， coco json，darknet，xml格式标注

停车场停车位数据集，标注停车位上是否有车，平均正确识别率99.5％，支持yolov5-11， coco json，darknet，xml格式标注

停车场停车位数据集&#xff0c;标注停车位上是否有车&#xff0c;平均正确识别率98.0&#xff05;&#xff0c;支持yolov5-11&#xff0c; coco json&#xff0c;darknet&#xff0c;xml格式标注 数据集-识别停车场所有车辆的数据集 数据集分割 一共184张图片 训练组 89&am…
阅读更多...
Lora微LLAMA模型实战

Lora微LLAMA模型实战

引言 本文介绍如何复现Alpaca-lora&#xff0c;即基于alpaca数据集用lora方法微调Llama模型。 环境准备 实验环境用的是lanyun&#xff0c;新用户点击注册可以送算力。 下载huggingface上的模型是一个令人头疼的问题&#xff0c;但在lanyun上可以通过在终端运行source /etc…
阅读更多...
什么是站群服务器？站群服务器应该怎么选？

什么是站群服务器？站群服务器应该怎么选？

站群服务器是专门用于托管和管理多个网站的服务器。通常用于SEO优化、内容分发、广告推广等场景&#xff0c;用户可以通过一个服务器管理多个站点&#xff0c;提升效率并降低成本。选择站群服务器时&#xff0c;需根据业务需求、性能要求、IP资源等因素进行综合考虑。 什么是站…
阅读更多...
【LInux进程六】命令行参数和环境变量

【LInux进程六】命令行参数和环境变量

【LInux进程六】命令行参数和环境变量 1.main函数的两个参数2.利用main函数实现一个简单的计算器3.环境变量之一&#xff1a;PATH4.修改PATH5.在命令行解释器bash中查看所有环境变量6.用自己写的程序查看环境变量7.main函数的第三个参数8.本地的环境变量和环境变量9.环境变量具…
阅读更多...
大语言模型的压缩技术

大语言模型的压缩技术

尽管人们对越来越大的语言模型一直很感兴趣&#xff0c;但MistralAI 向我们表明&#xff0c;规模只是相对而言的&#xff0c;而对边缘计算日益增长的兴趣促使我们使用小型语言获得不错的结果。压缩技术提供了一种替代方法。在本文中&#xff0c;我将解释这些技术&#xff0c;并…
阅读更多...
大华HTTP协议在智联视频超融合平台中的接入方法

大华HTTP协议在智联视频超融合平台中的接入方法

一. 大华HTTP协议介绍 大华HTTP协议是大华股份&#xff08;Dahua Technology&#xff09;为其安防监控设备开发的一套基于HTTP/HTTPS的通信协议&#xff0c;主要用于设备与客户端&#xff08;如PC、手机、服务器&#xff09;之间的数据交互。该协议支持设备管理、视频流获取、…
阅读更多...
7、vue3做了什么

7、vue3做了什么

大佬认为有何优点&#xff1a; 组合式api----逻辑集中、对ts有更好的支持RFC–开放了一个讨论机制&#xff0c;可以看到每一个api的提案&#xff0c;方便源码维护&#xff0c;功能扩展&#xff0c;大家一起讨论 官方rfc响应式独立&#xff0c;new Proxy&#xff0c;天生自带来…
阅读更多...
多人在线聊天系统，创建群，视频，语音，自带带授权码

多人在线聊天系统，创建群，视频，语音，自带带授权码

多人在线聊天系统&#xff0c;创建群&#xff0c;视频&#xff0c;语音 带授权码&#xff0c;授权码限制 10 个网站&#xff0c;需要下载研究吧 在线聊天&#xff0c;创建群&#xff0c;表情&#xff0c;图片&#xff0c;文件&#xff0c;视频&#xff0c;语音&#xff0c;自…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023