函数
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>
)
