需求和解决

  • 使用ant design vue 的table组件,没有使用插槽的情况下,我想你给我使用tooltip,这样子我就不用又写插槽又写html结构了
  • 因为我们使用table组件,想自定义结构,一般是先使用插槽,然后插槽填写内容,比如下面做法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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属性来简化这一个操作
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
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>