vnodeToString函数把vnode转为string(innerhtml)

函数

javascript 复制代码
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中封装渲染

html 复制代码
<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>

使用案例

javascript 复制代码
<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>
相关推荐
coooliang18 分钟前
【鸿蒙 NEXT】V1迁移V2状态管理
java·前端·harmonyos
Luke Ewin24 分钟前
FunASR的Java实现Paraformer实时语音识别 | 一款无需联网的本地实时字幕软件
java·人工智能·语音识别·asr·funasr·paraformer·sensevoice
程序员码歌28 分钟前
零代码AI编程实战-热搜从0到1技术方案
前端·ai编程·cursor
叫我阿柒啊31 分钟前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
望未来无悔34 分钟前
系统学习算法 专题十八 队列+宽搜
java·算法
kk不中嘞1 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
Linlichaoblms1 小时前
Nginx性能调优:参数详解与压测对比
java·spring boot·nginx
服务端技术栈1 小时前
历时 1 个多月,我的第一个微信小程序「图片转 Excel」终于上线了!
前端·后端·微信小程序
一个很老的小萌新1 小时前
json 解析 [{“id“:1,“name“:“apple“},{“id“:2,“name“:“banana“}]
java·前端·json
是2的10次方啊1 小时前
🏗️ 线程池深度解析:ThreadPoolExecutor底层实现与CompletableFuture异步编程实战
java