文字超出部分以省略号(...)代替，并显示tooltip，未超出不显示

效果如下：

思路：

获取元素的实际宽度，根据实际宽度和最大宽度比较，超出最大宽度则显示tooltip

代码（只展示关键部分，外层是table）：

// 外层是table表格
<div @mouseenter="e=> showToolTip(e, row)">
	<span>标识</span>
	<kui-tooltip v-if="row.info.show" :content="row.info.txt">
		<span>{{ row.info.txt }}</span>
	</kui-tooltip>
	<span v-else>
		{{ row.info.txt }}
	</span>
</div>

// 鼠标悬浮在绑定事件的元素上时判断当前文字是否超出最大宽度，超出则显示tooltip
showToolTip (e, row) {
	// 98可自定义，为文字最大宽度，超出这个宽度显示tooltip
    const showToolTip = e.target.lastChild.offsetWidth > 98;
    // 改变列表数据的show字段，show为true时展示tooltip，false为隐藏tooltip
    this.data.forEach(item => {
      if (item.fingerPrint === row.fingerPrint && showToolTip) {
        item.resourceInfo.show = true;
      } else {
        item.resourceInfo.show = false;
      }
    });
  }

设置省略号可用css3实现：

width: 98px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;