vue列表展示三个字多余字用省略号代替并有悬浮查看全部文字功能

最近在做运营后台的时候，常常出现列表页单元格里内容很长的情况，展示不太美观，有时产品也会规定省略号代替这种需求。

<el-table-column  label="表头（属性为text）">
  <template slot-scope="scope">
  <el-popover
    placement="top"
    trigger="hover"
    :disabled="scope.row.text.length <= 3"
  >
    <div>{{ scope.row.text }}</div>
    <span slot="reference" v-if="scope.row.text.length <= 3">
        {{scope.row.text}}
      </span>
    <span slot="reference" v-if="scope.row.text.length > 3">
      {{scope.row.text.substr(0, 3) + "..."}}
      </span>
  </el-popover>
</template>
</el-table-column>

具体Popover的设置可参考https://cloud.tencent.com/developer/section/1489903