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

本文主要是介绍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");

这篇关于element table 表格 span-method 某一列进行相同合并 支持树结构表格的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1140152

相关文章

Python进行JSON和Excel文件转换处理指南

《Python进行JSON和Excel文件转换处理指南》在数据交换与系统集成中,JSON与Excel是两种极为常见的数据格式,本文将介绍如何使用Python实现将JSON转换为格式化的Excel文件,... 目录将 jsON 导入为格式化 Excel将 Excel 导出为结构化 JSON处理嵌套 JSON:

MySQL CTE (Common Table Expressions)示例全解析

《MySQLCTE(CommonTableExpressions)示例全解析》MySQL8.0引入CTE,支持递归查询,可创建临时命名结果集,提升复杂查询的可读性与维护性,适用于层次结构数据处... 目录基本语法CTE 主要特点非递归 CTE简单 CTE 示例多 CTE 示例递归 CTE基本递归 CTE 结

一文解密Python进行监控进程的黑科技

《一文解密Python进行监控进程的黑科技》在计算机系统管理和应用性能优化中,监控进程的CPU、内存和IO使用率是非常重要的任务,下面我们就来讲讲如何Python写一个简单使用的监控进程的工具吧... 目录准备工作监控CPU使用率监控内存使用率监控IO使用率小工具代码整合在计算机系统管理和应用性能优化中,监

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL进行数据库审计的详细步骤和示例代码

《MySQL进行数据库审计的详细步骤和示例代码》数据库审计通过触发器、内置功能及第三方工具记录和监控数据库活动,确保安全、完整与合规,Java代码实现自动化日志记录,整合分析系统提升监控效率,本文给大... 目录一、数据库审计的基本概念二、使用触发器进行数据库审计1. 创建审计表2. 创建触发器三、Java

解决1093 - You can‘t specify target table报错问题及原因分析

《解决1093-Youcan‘tspecifytargettable报错问题及原因分析》MySQL1093错误因UPDATE/DELETE语句的FROM子句直接引用目标表或嵌套子查询导致,... 目录报js错原因分析具体原因解决办法方法一:使用临时表方法二:使用JOIN方法三:使用EXISTS示例总结报错原

MySQL深分页进行性能优化的常见方法

《MySQL深分页进行性能优化的常见方法》在Web应用中,分页查询是数据库操作中的常见需求,然而,在面对大型数据集时,深分页(deeppagination)却成为了性能优化的一个挑战,在本文中,我们将... 目录引言:深分页,真的只是“翻页慢”那么简单吗?一、背景介绍二、深分页的性能问题三、业务场景分析四、

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

linux解压缩 xxx.jar文件进行内部操作过程

《linux解压缩xxx.jar文件进行内部操作过程》:本文主要介绍linux解压缩xxx.jar文件进行内部操作,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、解压文件二、压缩文件总结一、解压文件1、把 xxx.jar 文件放在服务器上,并进入当前目录#