element table 表格 span-method 某一列进行相同合并 支持树结构表格

须知

这是 vue2 版本,不过理论上 vue3 也能参考使用

可以直接打开 codepen 查看代码

效果图

在这里插入图片描述

代码

打不开 codepen 或者codepen 失效,查看下面代码参考

<script src="//unpkg.com/vue@2/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app"><template><div><el-button @click="logMergedRowCount">Log</el-button><el-table row-key="id" @expand-change="expandChange" :data="tableData" :span-method="objectSpanMethod" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%; margin-top: 20px"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="amount1" label="数值 1(元)"></el-table-column><el-table-column prop="amount2" label="数值 2(元)"></el-table-column><el-table-column prop="amount3" label="数值 3(元)"></el-table-column></el-table></div></template>
</div>
@import url("//unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
var Main = {data() {return {tableData: [],spanMap: {}, // 每层的 id => {子级有几个, 祖宗是谁}expandRowKeys: {}};},computed: {parentMap() {const keys = Object.entries(this.expandRowKeys).filter(([k, v]) => v).map(([k]) => k);console.log("keys", keys);let result = {};for (const item of keys) {const expandRow = this.spanMap[item];if (result[expandRow.parentId]) {result[expandRow.parentId] += expandRow.childCount;} else {result[expandRow.parentId] = expandRow.childCount;}}return result;}},mounted() {let datalist = [{id: "1",name: "一级事件",amount1: "165",amount2: "4.43",amount3: 12,children: [{id: "2",name: "二级事件1",amount1: "165",amount2: "4.43",amount3: 12,children: [{id: "3",name: "三级事件1",amount1: "165",amount2: "4.43",amount3: 12},{id: "4",name: "三级事件2",amount1: "165",amount2: "4.43",amount3: 12}]},{id: "5",name: "二级事件2",amount1: "165",amount2: "4.43",amount3: 12}]},{id: "6",name: "一级事件2",amount1: "165",amount2: "4.43",amount3: 12},{id: "7",name: "二级事件1",amount1: "165",amount2: "4.43",amount3: 12,children: [{id: "8",name: "三级事件1",amount1: "165",amount2: "4.43",amount3: 12},{id: "9",name: "三级事件2",amount1: "165",amount2: "4.43",amount3: 12}]},{id: "10",name: "三级事件1",amount1: "165",amount2: "4.43",amount3: 12},{id: "11",name: "三级事件2",amount1: "165",amount2: "4.43",amount3: 12}];datalist = this.preprocessData(datalist);this.tableData = datalist;},methods: {/*** 处理行展开状态变化的事件。* @param {Object} row - 当前行的数据对象。* @param {boolean} expanded - 表示行是否被展开。*/expandChange(row, expanded) {// 使用 Vue 的 $set 方法更新展开行的键值对,确保响应性this.$set(this.expandRowKeys, row.id, expanded);},/*** 打印合并行数的日志。*/logMergedRowCount() {// 打印合并行数的映射,用于调试或检查合并状态console.log(this.mergedRowCount);},preprocessData(data, id = "") {return data.map((item) => {const newItem = { ...item };newItem.parentId = id; // 将当前路径作为 parentId 属性if (this.spanMap[item.id]) {this.spanMap[item.id].childCount = item.children?.length || 0;} else {this.spanMap[item.id] = {childCount: item.children?.length || 0,parentId: id || item.id};}if (item.children && item.children.length > 0) {newItem.children = this.preprocessData(item.children, id || item.id);}return newItem;});},//进行表格合并objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {if (row.parentId) {return {rowspan: 0,colspan: 0};} else {console.log("row.id", this.parentMap[row.id]);return {rowspan: (this.parentMap[row.id] ?? 0) + 1,colspan: 1};}}}}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount("#app");

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

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

相关文章

驭势科技研究成果入选学术顶会IROS 2024

近日&#xff0c;驭势科技团队关于自动驾驶车辆定位算法的最新研究成果《LiDAR-based HD Map Localization using Semantic Generalized ICP with Road Marking Detection》&#xff0c;创造性地解决了基于LiDAR的实时路标检测和高精地图配准所带来的挑战&#xff0c;成功入选国…

第九届“创客中国”生成式人工智能中小企业创新创业大赛招商推介圆满落幕

金秋九月,丹桂飘香。9月2日晚,第九届“创客中国”生成式人工智能(AIGC)中小企业创新创业大赛招商推介会在南昌高新区艾溪湖畔成功举办。南昌市政府副秘书长、办公室党组成员陈吉炜出席并致辞。市中小企业局党组书记、市工信局党组书记、局长骆军出席。南昌高新区党工委委员、管…

CMU 10423 Generative AI:lec2

文章目录 1 概述2 部分摘录2.1 噪声信道模型&#xff08;Noisy Channel Models&#xff09;主要内容&#xff1a;公式解释&#xff1a;应用举例&#xff1a; 2.2 n-Gram模型1. 什么是n-Gram模型2. 早期的n-Gram模型3. Google n-Gram项目4. 模型规模与训练数据5. n-Gram模型的局…

AI科学家:自动化科研的未来之路

随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;AI已经在众多领域中展现了强大的潜力&#xff0c;尤其是在科研方面的应用正在引起广泛关注。最近&#xff0c;Sakana AI与牛津大学和不列颠哥伦比亚大学联合推出了一款被称为“AI科学家”的自动化科研工具&am…

Stable Diffusion抠图插件爬坑经历,StableDiffusion实操案例(附整合资料)

今天给大家分享使用后期处理插件stable-diffusion-webui-rembg实现抠图功能。 &#x1f449;AI绘画必备工具&#x1f448; 温馨提示&#xff1a;篇幅有限&#xff0c;已打包文件夹&#xff0c;获取方式在&#xff1a;文末 &#x1f449;AI绘画基础速成进阶使用教程&#x1f…

聚铭网络入选“2024年南京市工程研究中心”认定名单

为深入实施创新驱动发展战略&#xff0c;因地制宜发展新质生产力充分发挥工程研究中心对推进产业强市的重要支撑作用&#xff0c;根据《南京市工程研究中心管理办法》&#xff0c;南京市发展和改革委员会于2024年5月组织开展了本年度南京市工程研究中心遴选工作。经企业申报、各…

[iBOT] Image BERT Pre-Training with Online Tokenizer

1、目的 探索visual tokenizer编码下的MIM&#xff08;Masked Image Modeling&#xff09; 2、方法 iBOT&#xff08;image BERT pre-training with Online Tokenizer&#xff09; 1&#xff09;knowledge distillation&#xff08;KD&#xff09; distill knowledge from the…

Linux下快速判断当前终端使用的是bash or csh

在Linux下设置环境变量的时候&#xff0c;可能你也遇到过export: Command not found一类的错误。这是因为当前终端使用的不是bash&#xff0c;如何快速判断当前终端使用的是哪种类型的shell呢&#xff1f; echo $0判断shell类型 最简单的方法就是在终端输入echo $0&#xff0…

Linux---文件(2)---文件描述符缓冲区(语言级)

目录 文件描述符 基础知识 文件描述符 对“Linux一切皆文件”的理解 文件描述符分配规则 缓冲区 刷新策略 存放位置 解释一个"奇怪的现象" 格式化输入输出 文件描述符 基础知识 在系统层面上&#xff0c;文件操作都是通过文件描述符来操作的。 程序在启…

leetcode回文链表

leetcode 回文链表 题目 题解 两种方式进行题解 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, Li…

JavaWeb JavaScript 9.正则表达式

生命的价值在于你能够镇静而又激动的欣赏这过程的美丽与悲壮 —— 24.8.31 一、正则表达式简介 正则表达式是描述字符模式的对象。正则表达式用简单的API对字符串模式匹配及检索替换&#xff0c;是对字符串执行模式匹配的强大工具。 1.语法 var pattnew RegExp(pattern,modi…

DataWorks数据质量监控方案

背景 日常的调度监控&#xff0c;可以查看实例任务的运行情况&#xff0c;对运行失败的实例进行告警&#xff0c;但是却无法对运行成功的实例进行数据质量的判断。而有些情况下&#xff0c;即使实例任务运行成功了&#xff0c;数据也仍然存在问题&#xff0c;这时候就需要对数…

uniapp / uniapp x UI 组件库推荐大全

在 uniapp 开发中&#xff0c;我们大多数都会使用到第三方UI 组件库&#xff0c;提起 uniapp 的UI组件库&#xff0c;我们最常使用的应该就是uview了吧&#xff0c;但是随着日益增长的需求&#xff0c;uview 在某些情况下已经不在满足于我们的一些开发需求&#xff0c;尽管它目…

第66期 | GPTSecurity周报

GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区&#xff0c;集成了生成预训练Transformer&#xff08;GPT&#xff09;、人工智能生成内容&#xff08;AIGC&#xff09;以及大语言模型&#xff08;LLM&#xff09;等安全领域应用的知识。在这里&#xff0c;您可以找…

DOCKER(国内镜像源,安装相关微服务组件,py以及jar包的docker打包(上传私有云以及输出本地文件))

前言 之前单独在旧的帖子下面更新的时候&#xff0c;码字码了1000多字的时候电脑蓝了&#xff0c;重启什么东西都没有&#xff0c;我红了。平台上面的自动保存是针对新文章的。 这周因为隔壁有项目要验收了&#xff0c;我的好大哥就把我派过去配合赶进度了&#xff0c;还体验了…

java fastxml json 科学计数法转换处理

背景&#xff1a; 由于 canal 切换为 tx dbbridge后&#xff0c;发现dbbridge对于canal的兼容性存在较大问题&#xff0c;从而引发 该文档的实践。 就目前发现 dbbrige 的字段 大小写 和 数据类型格式 从binlog 写入kafka 同canal 都会存在差异。 canal之前导出都是小写&…

【ArcGIS/GeoScenePro】Portal和Server关系

简介 以下是ArcGIS的整体架构图 上图简化后 从图中我们可以看出可以将其分为三层其中: 最上层:应用层 中间层(门户):连接应用层和服务器,对server上发布的服务进行管理、分享和权限分配 最低层:服务器(Server层) 其中Enterprise = portal(中间层)+server(最底…

Tomato靶场渗透测试

1.扫描靶机地址 可以使用nmap进行扫描 由于我这已经知道靶机地址 这里就不扫描了 2.打开网站 3.进行目录扫描 dirb http&#xff1a;//172.16.1.113 发现有一个antibot_image目录 4.访问这个目录 可以看到有一个info.php 5.查看页面源代码 可以发现可以进行get传参 6.…

3. GIS后端工程师岗位职责、技术要求和常见面试题

本系列文章目录&#xff1a; 1. GIS开发工程师岗位职责、技术要求和常见面试题 2. GIS数据工程师岗位职责、技术要求和常见面试题 3. GIS后端工程师岗位职责、技术要求和常见面试题 4. GIS前端工程师岗位职责、技术要求和常见面试题 5. GIS工程师岗位职责、技术要求和常见面试…

表连接查询之两个left join与递归SQL

一、如下SQL1 SELECT i.*,su1.name as createName,su2.name as updateNameFROM information ileft join sys_user su1 on su1.idi.create_idleft join sys_user su2 on su2.idi.update_id 二、分析 1、SELECT i.*,su.name as createName,sua.name as updateName FROM informati…