vue的h渲染函数和customRender在ant design vue的table组件的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue的h渲染函数和customRender在ant design vue的table组件的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求和解决

使用ant design vue 的table组件,没有使用插槽的情况下,我想你给我使用tooltip,这样子我就不用又写插槽又写html结构了
因为我们使用table组件,想自定义结构,一般是先使用插槽,然后插槽填写内容,比如下面做法

const columns = [
  {
    title:'演示',
    dataIndex:'demo',
    slots:{customRender:'demo'},
    ellipsis:true,
    align:'center',

  },
  ]
<a-table :columns="columns">
	<template #demo={record,text}>
        <!--要书写的结构-->
        <a-tooltip>
        	<template #title>我是内容</template>
            我是内容
        </a-tooltip>
    </template>
</a-table>

这个时候我们可以使用组件列表columns说明的customRender属性来简化这一个操作

import {h} from "vue";
import {Tooltip} from "ant-design-vue";
columns = [
  {
    title:'演示',
    dataIndex:'demo',
    slots:{customRender:'demo'},
    ellipsis:true,
    align:'center',
    customRender:({record})=>{
      return h(Tooltip,{title:record.corpName,placement:'top'},{ default: () => record.corpName })
    }
  }
]

<a-table :columns="columns"></a-table>

<!--这上面一行代码就等同于下面的代码-->

<a-table :columns="columns">
	<template #demo={record,text}>
        <!--要书写的结构-->
        <a-tooltip>
        	<template #title>我是内容</template>
            我是内容
        </a-tooltip>
    </template>
</a-table>