elementUI表格带有icon图标的内容超出隐藏

问题描述： elementUI表格中提供了 show-overflow-tooltip 属性隐藏表格中过长的内容，并显示tooltip，但如果内容后面有icon图标或其他操作按钮的时候，设置这个属性会连带着这些操作按钮一起隐藏，无法满足我们的需求。

不做处理会自动换行：

设置 show-overflow-tooltip 属性图标会被隐藏：

解决思路： 给文字内容标签设置最大宽度超出隐藏，超出时显示tooltip文字提示

<el-table-column prop label="候选人姓名" min-width="120" align="left">
    <template slot-scope="scope">
      <el-tooltip :disabled="scope.row.isToolTipShowOfName" effect="dark" :enterable="false" :content="scope.row.userName" placement="top" :visible-arrow="false">
         <router-link
           :ref="`${scope.$index}`+'name'"
           target="_blank"
           style="float:left;text-decoration:none;max-width:60px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"
           :to="{path:'/resume/details',query:{id:scope.row.resumeId}}"
         >{{scope.row.userName}}</router-link>
      </el-tooltip>
      <i
         class="iconfont iconbiaogeneidianhua"
         @click="call(scope.row,scope.row.mobile)"
         style="margin-left:10px;"
      ></i>
    </template>
</el-table-column>

获取列表数据的同时，根据元素内容宽度是否超出设定的最大宽度，动态添加 isToolTipShowOfName 属性值，通过赋值给el-tooltip组件的disabled属性，判断是否显示tooltip文字提示。

this.$nextTick(() => {
    if(this.$refs[`${i}`+'name'].$el.offsetWidth >= 60) {
       this.$set(this.ListData[i], 'isToolTipShowOfName', false );
    } else {
       this.$set(this.ListData[i], 'isToolTipShowOfName', true );
    }
})

最终效果：