首先来看下效果：

表格里的内容由于过多，为了整体美观性，使用超出文字以tooltip的形式进行展示，主要使用了插槽（slot）的方式。

一、编写一个tooltip工具

代码如下：

<template>
  <a-tooltip placement="topLeft">
    <template slot="title">
      <span>{{value}}</span>
    </template>
    {{ value | ellipsis(length) }}
  </a-tooltip>
</template>
<script>
  export default {
    name: 'JEllipsis',
    props: {
      value: {
        type: String,
        required: false,
      },
      length: {
        type: Number,
        required: false,
        default: 25,
      }
    }
  }
</script>
<style scoped>
</style>

默认为25个字符，多余的使用...代替

二、页面引用

在需要用到的页面引入上述工具代码，如：

import JEllipsis from './JEllipsis'

2.1 在table的列配置中增加如下代码：

{
       title: '汇报内容',
          align: 'center',
          dataIndex: 'huiBaoNeiRong',
          width: 350,
          scopedSlots: { customRender: 'huiBaoNeiRong' }
      
        },

2.2 在table中增加插槽，如

      <a-table>
  <span slot="huiBaoNeiRong" slot-scope="text">
          <j-ellipsis v-if="text.length>22" :value="text" :length="22"/>
            <span v-else>{{text}}</span>
        </span>
      </a-table>

按照实际的长度，超过的用...代替，不超过的全部显示。