渲染函数

业务场景，接口返回的数据格式是

直接将数据插入到table中，展示的效果就跟接口返回的数据是一样的，很明显我们不需要标签
不需要高亮的话，我们可以直接使用正则将匹配的标签掉换成空
let desc = ‘币种[“USD”]放行，[“CNY”]拦截’
desc.replace(/<[^>]+>/gim,’’)
结果：币种[“USD”]放行，[“CNY”]拦截
但是产品经理要求对于条件的部分需要高亮显示
效果如下：
如果页面中使用elementUI中的table组件,可以直接使用v-html指令
我们使用双大括号会将数据解释为普通文本，而非HTML，v-html指令可以用来输出真正的HTML
如下：

<el-table>
	<el-table-column>
        <template slot-scope="scope">
        	<span class="fl risk-msg risk-msg-i" v-html="scope.row.desc" />
        </template>
        </el-table-column>
</el-table>

但是在我们当前的项目中把table封装成了一个组件，需要的table列，通过props中columns,来传到子组件的，所以就不能直接使用指令了，需要使用渲染函数render来为其添加对应的dom结构

 <Table 
 :table-data="tableData"
  :page-info="{total: total, currentPage:selectObject.page}" :columns="columns" 
  :sort-able="false" border 
  @get-more="getMore"
  @get-all="getAll"
  @on-edit="AccountEdit" 
  @on-delete="goBlockLoginListDelete" />
  data(){
	  return {
	  columns：[
		   {
	         label: '拦截原因',
	          prop: 'render',
	          align: 'center',
	          // showTooltip: true,
	          render: (h, params, vm) => {
	            const desc = params.row.desc.split('<i>')
	            return h('div',
	              [h('span', desc.map(item => {
	                if (item.indexOf('</i>') === -1) {
	                  return h('em', item)
	                } else {
	                  const desc1 = item.split('</i>')
	                  return [h('i', { style: 'color:#ea7d09' }, desc1[0]), h('em', desc1[1])]
	                }
	              }))])
		          }
		        }]
	  }
  }
 

渲染的结果：

h函数接受三个参数
h(必需的，可选，可选)
第一个参数HTML标签，使用null将渲染一个注释

子组件
<script>
import { h } from 'vue'
export default ({
  name: 'RenderUse',
  render () {
    return h()
  }
});
</script>

渲染结果：

 render () {
    return h('div', 
    //标签名 
    //数据类型: {String|Object|Function}
    //对应标签名|一个组件|异步组件，或者null
    //为空则渲染成一个注释
      { id: "render-use" }, //可选，标签的属性，props/attributes ,数据类型，{Object}
      [h('h1')] //子虚拟节点或文本内容 数据类型:{String|Arrary|Object}
    )
  }

 return h(UseMixin, {
      class: 'use',
      'data-id': 'data-id'
    })
    组件，添加到组件根节点的属性

 return h('div','11111')
    标签，文本内容

render () {
    return h('div', ['222', h('p', '000')])
  }
  标签，[文本内容，字节点]

事件

return h('div', {
      onClick: function (e) {
        console.log(e.target)
      }
    }, '点击')
    绑定事件

子组件
render () {
    return h('div', {}, this.$slots.default())
  }
  父组件
  <RenderUse>RenderUse</RenderUse>
  第三个参数是有插槽的对象

以上都是一些基础的内容，如果想更加深入的了解渲染函数
戳这里