vue.js 2中如何在代码中使用vue的模板引擎生成html?

Z时代
2024-02-28
分类：IT

需求: 后端会返回一个各种内容组合的数据到前端。前端需要根据对应的名称生成各种展示样式
例:

{name: 'x', address:{'p': '省名', 'c': '市名', 'd': '区县名称', 's': '具体街道'}, capital: [{'name':'某投资人', 'amount':'投资金额', 'percent': '投资占比', 'vision':'投资愿景'},...]}

上面有三个简单的示例(/业务场景比这个多):

name: 需要直接输出即可, address: 需要按某种格式输出, capital: 需要每个投资人一行. 其中capital.name要增加连接

现代码:

<tr v-for="(val,key,index) in alterBase" :key="index">
  <td class="title-center">{{ index+1 }}</td>
  <td>{{ printChangeItem(key) }}</td>
  <td class="value-column" v-html="printAdapterExpr(key, val)"></td></tr>

printChangeItem方法负责将英文键换成中文. printAdapterExpr方法根据不同的键格式化输出html字符串。它只是一个委托方法: 若存在格式化方法(printCapital)调用.不存在直接输出:val

问题：如何在某个格式化方法(printCapital)中使用vue的模板来生成html

回答：

模板:

<template>
  <div>
    <el-row>
        <table class="oams-table" v-loading="isLoding">
          <tbody>
            <tr v-for="(val,key,index) in alterBase" :key="index">
              <td class="title-center">{{ index+1 }}</td>
              <td>{{ printChangeItem(val.item) }}</td>
              <td class="value-column"><renderVDom :vNode="printAdapterExpr(val.item, val.before, 'before')"></renderVDom></td> 
              <td class="value-column"><renderVDom :vNode="printAdapterExpr(val.item, val.after, 'after')"></renderVDom></td>
            </tr>
          </tbody>
        </table>
    </el-row>
  </div></template>

script:

export default {
  name: 'xxxx',
  components: {
    renderVDom: {
      props: {
        vNode: [Array, String, Object, Number]
      },
      methods:{
        isVNode(arg){
          // 获取 vnode 实例
          let _vnode = this.$createElement('span', '')
          // VNode 构造函数
          let __VNode = _vnode.constructor
          return arg instanceof __VNode
        }
      },
      render (h, context) {
        return this.isVNode(this.vNode) ? this.vNode : h('div', { domProps: { innerHTML: this.vNode } }, [])
      }
    }
  },
  props: {},
  methods: {
    printAdapterExpr(key, val, offset){
      // 若不存在直接输出
      // 1)非VNode
      return val
      // 2)
      //  2.1) JSX 
      // return <span>{val}</span>
      //  2.2) 创建VNode
      // return this.$createElement('span', val)
    }
  }}