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

vnodeToString函数把vnode转为string（innerhtml）

news 2026/5/26 4:09:24

函数

function vnodeToString(vnode) {// 如果是文本节点，直接返回文本内容if (['string', 'boolean', 'undefined', 'null', 'number'].includes(typeof 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}>`;
}

因为业务中需要低代码配置表格，配置文件就用的vnode格式

vue中封装渲染

<template><div v-html="str"></div>
</template><script>
function vnodeToString(vnode) {// 如果是文本节点，直接返回文本内容if (['string', 'boolean', 'undefined', 'null', 'number'].includes(typeof 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}>`;
}
export default {name: "originalTableConfig",props: {config: {type: Object,default: () =>({})}},data(){return {str:'',}},watch: {config:{handler(){this.setStr()},immediate: true,}},methods: {setStr(){this.str = vnodeToString(this.config)},getHtmlStr(){// html前缀 + 样式const htmlPre = `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"></meta><title>Title</title></head><body>`// html后缀const htmlSuf = `</body></html>`// 拼接const res = htmlPre + this.str + htmlSuf// 返回return res},}
}
</script>

使用案例

<template><div><original-table-config :config="myConfig"/></div>
</template><script>
import OriginalTableConfig from "@/views/originalTableConfig/components/originalTableConfig.vue";
// {
//   tag: '',// 元素标签
//   attrs: {}, // 标签属性
//   children: [],// 子元素
// }
export default {components: {OriginalTableConfig},data() {return {myConfig: {}}},mounted() {this.setTable()},methods: {setTable(){const commonTrStyle = "padding: 4px; margin-bottom: 10px;"const commonAttrsLabel = {style: 'text-align: right;' + commonTrStyle}const commonAttrsValue = {style: 'border-bottom: 1px solid black;' + commonTrStyle}this.myConfig = {tag: 'table',children: [{tag: 'tbody',attrs: {style: "width: 685px;"},children: [{tag: 'tr',children: [{tag: "th", attrs: {style: "width: 120px;"}},{tag: "th", attrs: {style: "width: 120px"}},{tag: "th", attrs: {style: "width: 100px"}},{tag: "th", attrs: {style: "width: 120px"}},{tag: "th", attrs: {style: "width: 100px"}},{tag: "th", attrs: {style: "width: 120px"}},]},{tag: 'tr',children: [{tag: 'td',attrs: {style: "font-size: 18px; text-align: center;",colspan: '6'},children: ['撒打发士大夫啥打发大水发收到']},{tag: 'td'},{tag: 'td'},{tag: 'td'},{tag: 'td'},{tag: 'td'}]},{tag: 'tr',children: [{tag: 'td',attrs: {style: "font-size: 18px; text-align: center;padding-bottom: 10px",colspan: '6'},children: ['xxxxxxxxxxx发送到发大水发斯蒂芬表']},{tag: 'td'},{tag: 'td'},{tag: 'td'},{tag: 'td'},{tag: 'td'}]},{tag: 'tr',children: [{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue},{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue},{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue}]},{tag: 'tr',children: [{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue},{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue},{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue}]},{tag: 'tr',children: [{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue},{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue},{tag: 'td', children: ['xxx金额：'], attrs: commonAttrsLabel},{tag: 'td', children: ['xxxxxxxxx', '元'], attrs: commonAttrsValue}]},{tag: 'tr',children: [{tag: 'td', children: ['xxx负责人：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue},{tag: 'td', children: ['xxx领导：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue},{tag: 'td', children: ['xxx人：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue}]},{tag: 'tr',children: [{tag: 'td', children: ['xxx部门：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue},{tag: 'td'},{tag: 'td'},{tag: 'td', children: ['xxx单位：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue}]},{tag: 'tr',children: [{tag: 'td', children: ['xxx日期：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue},{tag: 'td', children: ['xxx日期：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue},{tag: 'td', children: ['xxx日期：'], attrs: commonAttrsLabel},{tag: 'td', children: [''], attrs: commonAttrsValue}]},]}]}}}
}
</script>

vnodeToString函数把vnode转为string（innerhtml）

函数 function vnodeToString(vnode) {// 如果是文本节点，直接返回文本内容if ([string, boolean, undefined, null, number].includes(typeof vnode)) {return vnode;}// 转换节点的属性为字符串形式const attrs Object.keys(vnode.attrs || {}).map((key) > …...

编程日记 2023/11/16 13:42:39

【Halcon】C# HTuple多参数设置小技巧

比如，在halcon中我们经常这么写： dev_disp_text (hello, window, 100, 200, red, [box,shadow],[true,false])[‘box’,‘shadow’] 和 [‘true’,‘false’] 成对出现。可以同时对多个参数设置。如果用halcon翻译C#，你会得到&#xff1a…...

编程日记 2023/11/16 13:40:36

此芯科技加入绿色计算产业联盟，参编绿色计算产业发展白皮书

近日，此芯科技正式加入绿色计算产业联盟（Green Computing Consortium，简称GCC），以Arm架构通用智能CPU芯片及高能效的Arm PC计算解决方案加速构建软硬协同的绿色计算生态体系，推动绿色计算产业加速发展。继…...

编程日记 2023/11/16 13:39:35

webrtc 生成unpack_aecdump工具

1.download webrtc-code https://git.ringcentral.com/build/webrtc-build 2.下载webrtc代码 3.terminal 进入src目录下 4.构建目录： terminal执行：gn gen out/Release --argsis_component_buildfalse 5.构建可执行文件： terminal执行…...

编程日记 2023/11/16 13:38:34

数据结构第四课 -----线性表之队列

作者前言 🎂 ✨✨✨✨✨✨🍧🍧🍧🍧🍧🍧🍧🎂 🎂 作者介绍： 🎂🎂 🎂 🎉🎉&#x1f389…...

编程日记 2023/11/16 13:37:33

蓝桥杯第 3 场算法双周赛4，7题

迷宫逃脱一眼数字三角形模型，因为是要求最大值，而且对转移状态有限制，所以需要注意dp状态的初始化，可以将所有状态赋值为-0x7f，然后将dp[0][1]和dp[1][0]初始化为0，又因为考虑到起始点a[1][1]&#xff0c…...

编程日记 2023/11/16 13:36:32

西安有哪些比较好的设计院？西安名企设计院介绍！

1、西北综合勘察设计研究院（地址：陕西省西安市习武园9号） 西北综合勘察设计研究院始建于1952年，是西北地区建设领域成立最早、规模最大的的综合性甲级勘察设计咨询科研单位，公司业务以工程勘察、建筑设计、市政设计、…...

编程日记 2023/11/16 13:35:31

Java获取Jar、War包路径，并生成可编辑修改的本地配置文件

前言本地的可修改配置文件的编写理应是一个很常用的功能，但由于数据库的存在，它鲜少被提及，大多数我们直接存储到数据库中了。以至于现今，除了没接触数据库的新手时常使用它以外，它没有太多的出场机会。也因此&am…...

编程日记 2023/11/16 13:34:30

FPGA UDP RGMII 千兆以太网（4）ARP ICMP UDP

1 以太网帧 1.1 1以太网帧格式下图为以太网的帧格式：前导码（Preamble）：8 字节，连续 7 个 8’h55 加 1 个 8’hd5，表示一个帧的开始，用于双方设备数据的同步。目的 MAC 地址：6 字节，存放目的设备的物理地址，即 MAC 地址源 MAC 地址：6 字节，存放发送端设备的…...

编程日记 2023/11/16 13:33:29

【视觉SLAM十四讲学习笔记】第二讲——初识SLAM

专栏系列文章如下： 【视觉SLAM十四讲学习笔记】第一讲一个机器人，如果想要探索某一块区域，它至少需要知道两件事： 我在什么地方——定位周围环境是什么样——建图一方面需要明白自身的状态（即位置）&#…...

编程日记 2023/11/16 13:32:28

Python交易-通过Financial Modeling Prep (FMP)选择行业

介绍在您的交易旅程中，无论您是在寻找理想的股票、板块还是指标，做出明智的决策对于您的成功至关重要。然而，收集和分析所需的大量数据可能相当艰巨。财务建模准备 (FMP) API的...

编程日记 2023/11/16 13:31:27

AI创作系统ChatGPT网站源码+详细搭建部署教程+支持DALL-E3文生图/支持最新GPT-4-Turbo-With-Vision-128K多模态模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统，支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美，可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…...

编程日记 2023/11/16 13:30:26

快速生成力扣链表题的链表，实现快速调试

关于力扣链表题需要本地调试创建链表的情况我们在练习链表题，力扣官方需要会员，我们又不想开会员，想在本地调试给你们提供的代码声明：本人也是参考的别人的代码，给你们提供不同语言生成链表参考链接： 参…...

编程日记 2023/11/16 13:29:25

threejs(13)-着色器设置点材质

着色器材质内置变量 three.js着色器的内置变量，分别是 gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕…...

编程日记 2023/11/16 13:28:24

计算机网络专栏学习导航or使用说明

计算机网络各章笔记计算机网络_第一章_计算机网络的概述计算机网络_第二章_物理层计算机网络_第三章_数据链路层计算机网络_第四章网络层_网络层概述_网际协议IP 计算机网络各章习题计算机网络第一章习题_网络概述计算机网络第二章习题_物理层计算机网络第三章习…...

编程日记 2023/11/16 13:27:23

git clone:SSL: no alternative certificate subject name matches target host name

git clone 时的常见错误： fatal: unable to access ‘https://ip_or_domain/xx/xx.git/’: SSL: no alternative certificate subject name matches target host name ‘ip_or_domain’ 解决办法： disable ssl verify git config --global http.sslVe…...

编程日记 2023/11/16 13:26:22

代码随想录图论|130. 被围绕的区域 417太平洋大西洋水流问题

130. 被围绕的区域 **题目：**给你一个 m x n 的矩阵 board ，由若干字符 ‘X’ 和 ‘O’ ，找到所有被 ‘X’ 围绕的区域，并将这些区域里所有的 ‘O’ 用 ‘X’ 填充。题目链接：130. 被围绕的区域解题思路&#xff1a…...

编程日记 2023/11/16 13:24:20

Outlook无法显示阅读窗格

Outlook无法显示阅读窗格故障现象 Outlook主界面不显示阅读窗格故障截图故障原因阅读窗格被关闭解决方案 1、打开Outlook - 视图 – 阅读窗格 2、选择“靠右”或者“底部”，正常显示阅读窗格...

编程日记 2023/11/16 13:23:19

tensorflow 1.15 gpu docker环境搭建；Nvidia Docker容器基于TensorFlow1.15测试GPU；——全流程应用指南

前言: TensorFlow简介 TensorFlow 在新款 NVIDIA Pascal GPU 上的运行速度可提升高达 50%，并且能够顺利跨 GPU 进行扩展。如今，训练模型的时间可以从几天缩短到几小时 TensorFlow 使用优化的 C 和 NVIDIA CUDA 工具包编写，使模型能够在训练…...

编程日记 2023/11/16 13:22:17

一个22届被裁前端思想上得转变

距离上篇文章已经过去了三个多月，这个三个月，经历了技术攻坚，然后裁员，退房，回老家，找工作。短短的几个月，就经历社会的一次次毒打，特别是找工作，虽然算上实习我也有两年…...

编程日记 2023/11/16 13:21:16

从STM32迁移到普冉PY32F003：UART代码移植保姆级教程（附HAL库对比）

从STM32到普冉PY32F003的UART代码迁移实战指南 1. 国产MCU替代浪潮下的技术选择近年来，半导体行业的供应链波动促使更多工程师将目光投向国产MCU解决方案。普冉PY32F003系列作为Cortex-M0内核的代表产品，以48MHz主频、64KB Flash和8KB RAM的配置&#x…...

编程新知 2026/5/26 3:01:49

51单片机驱动ST7735S彩屏避坑指南：从5秒刷屏到流畅贪吃蛇的优化实战

51单片机驱动ST7735S彩屏性能优化实战：从卡顿到流畅游戏的蜕变之路当一块128x160分辨率的ST7735S彩屏遇上传统的51单片机，这种组合看似矛盾却又充满挑战。许多开发者初次尝试时会发现，原本在STM32等平台上运行流畅的显示驱动，移植…...

编程新知 2026/5/26 2:31:35

鸿蒙系统微博应用锁常见问题解答

为微博设置应用锁后，不少用户会有各种疑问：忘记密码怎么办？会不会影响消息推送？能不能只锁定某些功能？应用锁耗电吗？本文将针对这些高频问题逐一解答，帮助您更好地使用鸿蒙系统（Harm…...

编程新知 2026/5/26 1:27:07

2026上半年数据库系统工程师（软考）上午题回忆与解析（非标答版）

本文为考后回忆整理，非官方标准答案，旨在为考后对答案及下半年备考的同学提供参考。题目顺序和表述可能与原卷有出入，欢迎在评论区指正、补充。📊 整体考情分析刚结束的2026年上半年数据库系统工程师考试，上午题的风格…...

编程新知 2026/5/26 1:11:02

如何从零构建智能FOC轮腿机器人：完整开源硬件系统终极指南

如何从零构建智能FOC轮腿机器人：完整开源硬件系统终极指南【免费下载链接】foc-wheel-legged-robot Open source materials for a novel structured legged robot, including mechanical design, electronic design, algorithm simulation, and software developme…...

编程新知 2026/5/26 0:48:39

举一个具体例子说明为什么索引不是越多越好,举具体字段

文章目录1. 核心舞台：笔记表 (t_note) 结构设计🚨 错误的操作：2. 结合具体字段，拆解三大翻车现场现场一：给 view_count（浏览量）加索引 —— 导致写放大，拖垮数据库现场二&#xff1a…...

编程新知 2026/5/25 23:06:49

终极指南：5步快速掌握免费的3D点云标注工具labelCloud

终极指南：5步快速掌握免费的3D点云标注工具labelCloud 【免费下载链接】labelCloud A lightweight tool for labeling 3D bounding boxes in point clouds. 项目地址: https://gitcode.com/gh_mirrors/la/labelCloud 想要为自动驾驶、机器人视觉或3D目标检测…...

编程新知 2026/5/25 22:18:21