封装原生html的table处理方法【参数类似eltable】

直接跑html即可

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>封装原生talbe</title>
</head>
<body><div id="table_content"></div>
</body><script>// ---------------------------------------------------------封装开始------------------// 把vNode对象转为html字符串function vnodeToString(vnode) {// 如果是文本节点,直接返回文本内容if (['string', 'boolean', 'undefined', 'null', 'number'].includes(typeof vnode) || !vnode) {return vnode;}// 转换节点的属性为字符串形式const attrs = Object.keys(vnode.attrs || {}).map((key) => `${key}="${vnode.attrs[key]}"`).join(' ');// 转换子节点为字符串形式const children = (vnode.children || []).map(vnodeToString).join('');// 返回包含标签名、属性和子节点的字符串形式return `<${vnode.tag} ${attrs}>${children}</${vnode.tag}>`;}class DataToExcelHtml {// 原始数据originalData = []// 表格列配置数据columnsData = []// 渲染数据vNoderenderData = []// 表头vNode数据headerVNode = []// 表体vNode数据bodyVNode = []// 列宽colWidth = 120constructor(config) {this.dom = config.domthis.colWidth = config.colWidth || 120this.originalData = config.datathis.columnsData = config.columnsDatathis._setColIndex()this.headerVNode = this._setHeaderVNode()this.bodyVNode = this._setBodyVNode()this.setInnerHtml()}// 取最后一层flattenObjectArrayLast(arr, key = "children") {let flattened = [];arr.forEach(v => {if (v.children && v.children.length > 0) {flattened = flattened.concat(this.flattenObjectArrayLast(v[key]))} else {flattened.push(v);}})return flattened;}// 表头   设置每个字段所在的列 行下标值_setColIndex(data = this.columnsData, index = 0, row_index = 0) {data.forEach(v => {v.__colspan = this.flattenObjectArrayLast(v.children || []).length || 1v.__rowspan = v.rowspan || 1v.__col_index = v.__colspan > 1 ? null : indexv.__row_index = row_indexindex++if (v.children?.length) {index = this._setColIndex(v.children, index, row_index + 1)}})return index}// 设置样式_setStyle(col) {// 表样式通用const commonTrStyle = "height: 30px;"const commonBorder = 'border-width:1px;border-style:solid;border-color:#000000;'const commonAttrsLabel = {style: `text-align:${col.align || 'center'};font-size: 12px;` + commonBorder + commonTrStyle + col.styleStr,}return commonAttrsLabel}// 设置表头_setHeaderVNode(data = this.columnsData) {const that = this// 递归获取表头合并行深度let deep = (function getDeep(list) {let deep = 1list.forEach(col => {let curDeep = 1if (col.children && col.children.length) {curDeep += getDeep(col.children)}deep = curDeep > deep ? curDeep : deep})return deep})(data)// 递归获取表头VNodethis.headerVNode = (function recData(list, curDeep = 1, tr = []) {list.forEach(col => {tr[col.__row_index] = tr[col.__row_index] || { tag: 'tr', children: [] }const obj = {tag: 'td',children: [col.label],attrs: {style: that._setStyle(col).style,rowspan: col.__rowspan || 1,colspan: col.__colspan || 1,width: col.width || that.colWidth,}}if (col.children) {recData(col.children, curDeep++, tr)} else if (!col.children?.length) {}tr[col.__row_index].children.push(obj)})return tr})(data)return this.headerVNode}_setBodyVNode(data = this.originalData, columnsData = this.columnsData) {const flatColumns = this.flattenObjectArrayLast(columnsData).filter(v => v.__col_index !== null)function getChild(row, col, index) {if (col.type === 'index') {return index + 1}return row[col.prop] || ''}this.bodyVNode = data.map((row, index) => {const tr = { tag: 'tr', children: [] }// 列下标flatColumns.forEach((col, idx) => {tr.children.push({tag: 'td',children: [getChild(row, col, index)],attrs: {style: this._setStyle(col).style,}})})return tr})return this.bodyVNode}// 设为innerHtmlsetInnerHtml(vNode = this.headerVNode) {const i = vnodeToString({tag: 'table',attrs: {style: "border-collapse: collapse;border:1px",border: 1,id: 'excel-line-data'},children: [{tag: 'tbody',attrs: {style: ""},children: [].concat(vNode, this.bodyVNode)}]})this.dom.innerHTML = i}}// ---------------------------------------------------------封装结束------------------// ---------------------------------------------------------调用new DataToExcelHtml({dom: document.querySelector('#table_content'),data: [{ tlj: '测试1', time: '2023年', status: '001' },{ tlj: '测试2', time: '2023年', status: '001' },{ tlj: '测试3', time: '2023年', status: '001' },{ tlj: '测试4', time: '2023年', status: '001' },],columnsData: [{label: '标题',styleStr: 'color: red; font-size: 30px; font-weight: 700',children: [{label: 'xxx时间',align: 'left',children: [{label: "序号",type: 'index',rowspan: 2,},{label: "姓名",prop: 'tlj',width: 300,rowspan: 2,},{label: "---",children: [{label: "时间",width: 300,prop: "time"},{label: "状态",prop: "status",},]},]}]}]})</script><style>td {box-sizing: border-box;white-space: nowrap;min-width: 100px;}table {table-layout: fixed;}td {padding: 0 10px;}#table_content {overflow-x: auto;}
</style></html>

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

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

相关文章

Centos7下docker的jenkins配置启动vue、springboot生产环境

个人记录 上篇 Centos7下docker安装jenkins / Gitee上传私有仓库 安装插件 新建任务 多分支流水线 任务名称&#xff1a;ks-springboot&#xff08;后端&#xff09;/ ks-vue3&#xff08;前端&#xff09; 分支源 增加源&#xff1a;Git gitee复制git链接 https://g…

用例设计-抖音视频上下滑动用例

功能 正向case&#xff1a; 1、正常速度下滑&#xff0c;视频类、图片类、直播类资源能够正常展示 2、快速下滑&#xff0c;资源能够正常加载不会出现卡顿 3、下滑没有可加载的资源时&#xff0c;提示用户无新的资源 4、下滑幅度较大&#xff0c;更新一批新的资源 5、本地资源…

ECMA进阶1之从0~1搭建react同构体系项目1

ECMA进阶 ES6项目实战前期介绍SSRpnpm 包管理工具package.json 项目搭建初始化配置引入encode-fe-lint 基础环境的配置修改package.jsonbabel相关tsconfig相关postcss相关补充scripts脚本webpack配置base.config.tsclient.config.tsserver.config.ts src环境server端&#xff1…

简单的车牌号识别

目录 处理流程与界面各接口编写时遇到的一些问题上传图片识别结果标签显示中文 处理流程与界面 首先点击“上传图片”按钮&#xff0c;可以选择文件夹中含有汽车车牌的图片&#xff0c;并显示在“图片框”中。 点击“检测车牌”按钮&#xff0c;会先对“图片框”中即含有汽车车…

解析数据科学,探索ChatGPT背后的奥秘

在当今这个由数据驱动和AI蓬勃发展的时代&#xff0c;数据科学作为一门融合多种学科的综合性领域&#xff0c;对于推动各行各业实现数字化转型升级起着至关重要的作用。近年来&#xff0c;大语言模型技术发展态势强劲&#xff0c;为数据科学的进步做出了巨大贡献。其中&#xf…

高效解决Visual Studio Code中文乱码问题

文章目录 问题解决步骤 问题 Visual Studio Code新建一个文件编码方式总是默认GBK&#xff0c;如果我不修改成默认UTF-8&#xff0c;那么每次运行&#xff0c;如果有中文需要输出就会乱码&#xff01; 解决步骤 之后我会持续更新&#xff0c;如果喜欢我的文章&#xff0c;请记…

OpenCV基本图像处理操作(一)——图像基本操作与形态学操作

环境配置地址 图像显示 import cv2 #opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt#Matplotlib是RGB imgcv2.imread(cat.jpg) img_gray cv2.cvtColor(img,cv2.COLOR_BGR2GRAY) img_gray.shape cv2.imshow("img_gray", img_gray) cv2…

基于WOA优化的CNN-LSTM-Attention的时间序列回归预测matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1卷积神经网络&#xff08;CNN&#xff09;在时间序列中的应用 4.2 长短时记忆网络&#xff08;LSTM&#xff09;处理序列依赖关系 4.3 注意力机制&#xff08;Attention&#xff09; 4…

Golang面试题三(并发编程)

目录 1.Mutex有几种状态 未锁定&#xff08;Unlocked&#xff09;&#xff1a; 锁定&#xff08;Locked&#xff09;&#xff1a; 饥饿&#xff08;Starvation&#xff09;&#xff1a; 2.Mutex的模式 正常模式&#xff08;Normal Mode&#xff09; 饥饿模式&#xff08;…

【机器学习300问】69、为什么深层神经网络比浅层要好用?

要回答这个问题&#xff0c;首先得知道神经网络都在计算些什么东西&#xff1f;之前我在迁移学习的文章中稍有提到&#xff0c;跳转链接在下面&#xff1a; 为什么其他任务预训练的模型参数&#xff0c;可以在我这个任务上起作用&#xff1f;http://t.csdnimg.cn/FVAV8 …

Elasticsearch数据写入、检索流程及底层原理全方位解析

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 目录 ✍&#x1f3fb;序言✍&#x1f3fb;1️⃣✍&#x1f3fb;es的架构简介1. 分布式架构2. 索引与搜索3. 数据写入与持久化4. 缓…

C#值类型和引用类型、赋值、区别、相同点

C#值类型和引用类型 **前言&#xff1a;**在C#中变量分为以下几种类型&#xff1a;值类型&#xff08;Value Types&#xff09;,引用类型&#xff08;Reference Types&#xff09;,指针类型&#xff08;Pointer Types&#xff09;;指针类型&#xff08;变量存储另一种类型变量…

如何做信创测试

信创测试是一种系统化的方法&#xff0c;旨在评估和验证创意和创新项目的潜力和可行性。进行信创测试可以帮助企业在投入大量资源之前&#xff0c;对创意进行客观、科学的评估&#xff0c;以减少失败的风险并最大化成功的可能性。以下是一般性的信创测试步骤&#xff1a; 确定…

用 LLaMA-Factory 在魔搭微调千问

今天在魔搭上把千问调优跑通了&#xff0c;训练模型现在在 Mac 还不支持&#xff0c;需要用 N 卡才可以&#xff0c;只能弄个N 卡的机器&#xff0c;或者买个云服务器。魔搭可以用几十个小时&#xff0c;但是不太稳定&#xff0c;有的时候会自动停止。 注册账号 直接手机号注…

Docker:安装Redis,同时设置外网访问

step 1: 安装必要的一些系统工具   yum install -y yum-utils device-mapper-persistent-data lvm2 yum install -y libseccomp-devel Step 2: 添加软件源信息 sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo ​…

每天学习一个Linux命令之make

每天学习一个Linux命令之make 简介 在Linux系统中&#xff0c;make命令是一个非常有用的构建工具。它根据Makefile文件中指定的规则来构建项目。make命令可以极大地简化编译、链接和安装等任务。本文将详细介绍make命令的使用方法以及可用的选项。 基本用法 make命令的基本…

css的背景

一.css的背景&#xff1a; 通过css背景属性&#xff0c;可以给页面元素增加背景样式。 背景属性可以设置背景颜色&#xff0c;背景图片&#xff0c;背景平铺&#xff0c;背景图片位置&#xff0c;背景图像固定等。 3.1背景颜色 样式名称&#xff1a; background-color定义…

自然语言处理: 第二十七章LLM训练超参数

前言: LLM微调的超参大致有如下内容,在本文中&#xff0c;我们针对这些参数进行解释 training_arguments TrainingArguments(output_dir"./results",per_device_train_batch_size4,per_device_eval_batch_size4,gradient_accumulation_steps2,optim"adamw_8bi…

【无人机/平衡车/机器人】详解STM32+MPU6050姿态解算—卡尔曼滤波+四元数法+互补滤波(文末附3个算法源码)

效果: MPU6050姿态解算-卡尔曼滤波+四元数+互补滤波 目录 基础知识详解 欧拉角

对 SuperNeurons 的复现记录

文章目录 论文源码环境步骤数据集参考备忘 论文 [1801.04380] SuperNeurons: Dynamic GPU Memory Management for Training Deep Neural Networks 源码 GitHub - linnanwang/superneurons-release: this is the release repository of superneurons 环境 Ubuntu 22.04GeFo…