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>
相关推荐
HeXDev几秒前
【SkyWalking】服务端部署与微服务无侵入接入实战指南
java·微服务·架构·skywalking·链路追踪·微服务治理
一洽客服系统2 分钟前
网页嵌入与接入功能说明
开发语言·前端·javascript
DoraBigHead16 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
探索java20 分钟前
Java 深入解析:JVM对象创建与内存机制全景图
java·jvm
Sylvia-girl27 分钟前
Java---IDEA
java·开发语言·intellij-idea
Z_W_H_33 分钟前
【Springboot】Bean解释
java·开发语言
蓝婷儿1 小时前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐1 小时前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss