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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 这个时候我们可以使用组件列表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>
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29