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>
相关推荐
Json_1817901448011 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
大数据编程之光16 分钟前
Flink Standalone集群模式安装部署全攻略
java·大数据·开发语言·面试·flink
爪哇学长30 分钟前
双指针算法详解:原理、应用场景及代码示例
java·数据结构·算法
风尚云网34 分钟前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
ExiFengs34 分钟前
实际项目Java1.8流处理, Optional常见用法
java·开发语言·spring
paj12345678936 分钟前
JDK1.8新增特性
java·开发语言
木子020436 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing38 分钟前
React核心功能详解(一)
前端·react.js·前端框架
捂月42 分钟前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
繁依Fanyi1 小时前
简易安卓句分器实现
java·服务器·开发语言·算法·eclipse