vue的h渲染函数和customRender在ant design vue的table组件的使用

需求和办理

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

1. const columns = [
2.   {
3.     title:'演示',
4.     dataIndex:'demo',
5.     slots:{customRender:'demo'},
6.     ellipsis:true,
7.     align:'center',
9.   },
10.   ]
11. <a-table :columns="columns">
12.         <template #demo={record,text}>
13.         <!--要书写的结构-->
14.         <a-tooltip>
15.                 <template #title>我是内容</template>
16.             我是内容
17.         </a-tooltip>
18.     </template>
19. </a-table>

复制代码

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

1. import {h} from "vue";
2. import {Tooltip} from "ant-design-vue";
3. columns = [
4.   {
5.     title:'演示',
6.     dataIndex:'demo',
7.     slots:{customRender:'demo'},
8.     ellipsis:true,
9.     align:'center',
10.     customRender:({record})=>{
11.       return h(Tooltip,{title:record.corpName,placement:'top'},{ default: () => record.corpName })
12.     }
13.   }
14. ]
16. <a-table :columns="columns"></a-table>
18. <!--这上面一行代码就等同于下面的代码-->
20. <a-table :columns="columns">
21.         <template #demo={record,text}>
22.         <!--要书写的结构-->
23.         <a-tooltip>
24.                 <template #title>我是内容</template>
25.             我是内容
26.         </a-tooltip>
27.     </template>
28. </a-table>
29.   

复制代码

来源：https://blog.csdn.net/u014582342/article/details/127580431
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！