函数
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中封装渲染
<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>
使用案例
<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>
