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>
相关推荐
喵手27 分钟前
玩转Java网络编程:基于Socket的服务器和客户端开发!
java·服务器·网络
再见晴天*_*1 小时前
SpringBoot 中单独一个类中运行main方法报错:找不到或无法加载主类
java·开发语言·intellij idea
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
hdsoft_huge5 小时前
Java & Spring Boot常见异常全解析:原因、危害、处理与防范
java·开发语言·spring boot
前端君5 小时前
实现最大异步并发执行队列
javascript
雨白5 小时前
Java 多线程指南:从基础用法到线程安全
android·java
Hungry_Shark5 小时前
IDEA版本控制管理之使用Gitee
java·gitee·intellij-idea