ant-design-vue a-table 鼠标悬浮提示框

最终效果：

image.png

之前一直用element，后来换成了ant-design-vue, 好多东西都不太会
因为要在表格中加tooltip，查了好多资料。从网上搜了好多，但是根本不管用，幸亏自己鼓捣出来了，希望有更好办法的朋友可以评论下，在下技术有限。

image.png
image.png

这是a-table的官方示例，其中

ellipsis: true;

这行代码可以让该列在超过宽度后显示三个点...

<a-table>
  <a slot="name" slot-scope="text">{{text}}</a>
</a-table>

  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },

在a-table中可以用如上方式重新渲染固定列。
所以我们可以用这种方式重新渲染需要提示的列
以下是ant-design-vue中的tooltip写法

image.png

跟上述方式重新渲染，代码如下

<a-table>
      <a-tooltip slot="tool" placement="topLeft" slot-scope="text">
        <template slot="title">{{text}}</template>
        {{text}}
      </a-tooltip>
</a-table>

  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    width: 155,//固定列宽可以加上width
    ellipsis: true,
    scopedSlots: { customRender: 'tool' },
  },

完成！如果所有列都需要悬浮提示框，那么只需要每列都加上

    ellipsis: true,
    scopedSlots: { customRender: 'tool' },

缺点：如果表格中的列按照上述操作渲染，即使没有出现三个点，也会出现提示框

image.png