antd vue表头加图片以及气泡提醒

给需要自定义的表头添加配置

---

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

---

在columns中表头添加

---

columns: [ 
     { slots: { title: 'example' }, width: 150, dataIndex: 'example', ellipsis: true, scopedSlots: { customRender: 'exampleText' } },
]

其中slots中的title名：example 是表头的插槽名

其中scopedSlots中的title名：exampleText 是表内容的插槽名

然后开始插！

---

<!--回款比气泡-->
      <template slot="example">
        <a-tooltip overlayClassName="bgc_tooltip">
          <template slot="title">
            <div class="tipText">
              <p>我爱你</p>
              <p>好久不见</p>
            </div>
          </template>

          <div class="example">
            回款比
            <img alt="" src=""> //图片
          </div>
        </a-tooltip>
      </template>

使用a-tooltip组件，<template slot="title">中的内容就是气泡提醒的内容，会自动添加mouseenter显示和mouseleave消失的效果。

然后在其他内容中放了图片和文字作为插槽放入了表头