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

element el-table渲染二维对象数组

 效果图如下

完整代码如下

<template><section><h1>el-table渲染二维对象数组</h1><el-table :data="_data.tableList" :span-method="spanMethod" border><el-table-column prop="id" label="ID" /><el-table-column prop="name" label="姓名" /><el-table-column label="工作情况" align="center"><el-table-column prop="children_key" label="工号" /><el-table-column prop="children_work" label="上班天数" width="100"/><el-table-column prop="children_money" label="实发工资" width="100"/></el-table-column></el-table></section>
</template><script setup>
import { reactive, onMounted } from 'vue'const _data = reactive({// 表格数据tableList: [],// 表格合并数据spanArr: []
})onMounted(() => {getList()
})// 获取表格原数据
const getList = () => {var ApiList = [{id: 1, name: '爱坤',children: []},{id: 2, name: '刘德华',children: [{ key: 1, work: 43, money: 500 },]},{id: 3, name: '周润发',children: [{ key: 2, work: 12, money: 589 },{ key: 3, work: 9, money: 70 },]},]//【2】不要赋值到data,而是对数据进行"处理"// 由于表格无法渲染二级数据,所以对二维数组进行"平级"处理// 让数据都处于一级,这样每行就可以顺利展示了var temp = []//临时变量ApiList.forEach((item) => {//遍历第1层var obj = {}//临时变量if(item.children.length == 0) {//如果没有下级(空数组)obj['children_key'] = ''//工号obj['children_work'] = ''//上班天数obj['children_money'] = ''//实发工资temp.push({ ...obj, ...item })//合并两个对象}// 有下级,存在item.children.forEach((row) => {//遍历第2层obj['children_key'] = row.key//工号obj['children_work'] = row.work//上班天数obj['children_money'] = row.money//实发工资temp.push({ ...obj, ...item })//合并两个对象})})// 【3】数据处理完,需要对单元格合并做一些处理// 虽然你的数据可以平级展示,但会存在"相同"的一些数据getSpanArr(temp)//【4】全部完事,赋值data进行渲染即可// 如果你有加载效果,在这里赋值完毕后解开即可_data.tableList = temp
}// 表格组件的合并方法
const spanMethod = ({ rowIndex, columnIndex }) => {// 要合并哪些列,自己看参数,具体详见文档if (columnIndex === 0 || columnIndex === 1) {const _row = _data.spanArr[rowIndex];const _col = _row > 0 ? 1 : 0;return {rowspan: _row, //合并的行数colspan: _col //合并的列数,设为0则直接不显示}}
}// 计算表格单元格合并数据(判断当前元素与上一个元素是否相同)
// 如果当前数据和上一个相同,意味着它是一组的数据,进行合并
// 计算完毕后,赋值给"_data.spanArr",请根据你的情况修改
const getSpanArr = (list) => {// 每次计算前,必须重置清空_data.spanArr = []// 正式开始let pos = 0for (let i = 0; i < list.length; i++) {if (i === 0) {_data.spanArr.push(1);pos = 0} else {// 判断当前元素与上一个元素是否相同,你自己的项目要根据自己的情况进行修改!// 你自己的项目要根据自己的情况进行修改!你自己的项目要根据自己的情况进行修改!// 除了改这里,其他地方不用动,除非你读得懂代码// 重点!!请注意!!!这里的 [name]是关键,意味着使用name进行判断!// 重点!!请注意!!!这里的 [name]是关键,意味着使用name进行判断!// 重点!!请注意!!!这里的 [name]是关键,意味着使用name进行判断!if (list[i].name === list[i - 1].name) {_data.spanArr[pos] += 1;_data.spanArr.push(0);} else {_data.spanArr.push(1);pos = i;}}}
}</script>

http://www.lryc.cn/news/582450.html

相关文章:

  • 什么是 3D 文件?
  • 开源 python 应用 开发(三)python语法介绍
  • 【电脑】主要组成部分
  • 装备制造数字孪生底座平台
  • 【网络】Linux 内核优化实战 - net.ipv4.tcp_syn_retries
  • 利用AI技术快速提升图片编辑效率的方法
  • 数据结构 --- 栈
  • django-ckeditor配置html5video实现视频上传与播放
  • word中的单位详解
  • 算法化资本——智能投顾技术重构金融生态的深度解析
  • 使用阿里云/腾讯云安装完成mysql使用不了
  • 分库分表之实战-sharding-JDBC广播表
  • JavaScript基础篇——第二章 类型转换与常见错误解析
  • 《UE5_C++多人TPS完整教程》学习笔记42 ——《P43 瞄准(Aiming)》
  • 250708-Svelte项目从Debian迁移到无法联网的RHEL全流程指南
  • 计算机网络:(八)网络层(中)IP层转发分组的过程与网际控制报文协议 ICMP
  • [论文阅读] 软件工程 | 自适应CPS中的人机协作与伦理
  • 自动驾驶感知系统
  • 分水岭算法:图像分割的浸水原理
  • 【王树森推荐系统】召回12:曝光过滤 Bloom Filter
  • 大数据在UI前端的应用创新:基于社交网络的用户影响力分析
  • 深度学习——神经网络1
  • 基于物联网的智能交通灯控制系统设计
  • three案例 Three.js波纹效果演示
  • 【操作系统】进程(二)内存管理、通信
  • MySQL Galera Cluster部署
  • 如何利用AI大模型对已有创意进行评估,打造杀手级的广告创意
  • 算法学习笔记:11.冒泡排序——从原理到实战,涵盖 LeetCode 与考研 408 例题
  • 【计算机网络】王道考研笔记整理(1)计算机网络体系结构
  • 高效学习之一篇搞定分布式管理系统Git !