表格内文字超出后省略号显示

需求分析：当遇到表格展示一些基本信息中包括一些详情信息，字数不确定有多有少的情况下，为了避免表格被撑开导致宽高不一致的问题

下面这个方法可以完美解决控制表格内换行+控制字数+多出后省略号显示问题

<template slot-scope="scope">
  <!-- 鼠标移动到名称位置显示全部 -->
  <el-popover
    placement="top-start"
    width="400"
    trigger="hover">
    <!-- 详情 -->
    <slot>{{ scope.row.content }}</slot>
    <!-- 内容和过滤    style里是设置换行如果不需要换行可以去掉，单行显示-->
    <el-button slot="reference" type="text"><span style="display:inline-block;width:90px;word-wrap:break-word;white-space:normal;color: #606266">{{ scope.row.content|ellipsis }}</span></el-button>
  </el-popover>
</template>

  // 超过8个字符隐藏后面的
  filters: {
    ellipsis (value) {
      console.log(value)
      if (!value) return ''
      if (value.length > 50) {
        return value.slice(0, 50) + '...'
      }
      return value
    }
  },

讲js代码放到export default下即可

具体样式效果 鼠标移动到表格显示上方div