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>
相关推荐
Y学院6 分钟前
vue的组件通信
前端·javascript·vue.js
患得患失9497 分钟前
【ThreeJs】【伪VR】用 Three.js 实现伪 VR 全景看房系统:低成本实现 3D 级交互体验
javascript·3d·vr
PairsNightRain9 分钟前
React Concurrent Mode 是什么?怎么使用?
前端·react.js·前端框架
code小毛孩18 分钟前
如何简单的并且又能大幅度降低任务队列的锁粒度、提高吞吐量?
java·jvm·数据库
小岛前端22 分钟前
React 剧变!
前端·react.js·前端框架
你不是我我25 分钟前
【Java开发日记】请介绍类加载过程,什么是双亲委派模型?
java·开发语言
牢七32 分钟前
java10
java
teeeeeeemo34 分钟前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
阿挥的编程日记39 分钟前
基于SpringBoot的高校(学生综合)服务平台的设计与实现
java·spring boot·后端·spring·mybatis
小霞在敲代码41 分钟前
ArrayList - 数据结构 - 数组
java·索引