ant design table加入tooltip提示效果

1,208 阅读1分钟

image.png

对列加入插槽

 {
          title: '回复状态',
          align: 'center',
          dataIndex: 'replyState',
          scopedSlots: { customRender: 'replyState' },
          defaultSortOrder: '',
          sorter: (a, b) => a.replyState - b.replyState,
        },

在table加入插槽列使用a-tooltip组件

<span slot="replyState" slot-scope="text, record">
          <a-tooltip placement="topLeft">
        <template slot="title">
          <span>提示</span>
        </template>
        {{ record.readState | formatterReadState }}
      </a-tooltip>
        </span>