element的table中的show-overflow-tooltip使用过程中的坑

1.首先说下正常使用情况
这个时候使用是没问题的，而且当超过长度时，会自动显示省略号

<el-table-column
  prop="address"
  label="地址"
  show-overflow-tooltip>
</el-table-column>

2.有时我们想把省略号显示在中间，或者自己格式化字符串，这时候问题就来了,你会发现tooltip提示出来的信息也是带省略号的。
vue代码如下

<!--使用element自带的格式化数据写法-->
<el-table-column
  prop="sex"
  label="性别"
  :formatter="formateData"
  show-overflow-tooltip>
</el-table-column>
<!--使用自定义的过滤数据写法-->
<el-table-column
  prop="sex"
  label="性别"
  show-overflow-tooltip>
  <template slot-scope="scope">{{ scope.row.sex | filterData}}</template>
</el-table-column>

js代码随意

filters: {
  filterData: function (value) {
    return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
  }
},
methods: {
	//而且需要注意，当对数据进行格式化的，必须有返回值，不然会显示空白
	formateData(row, column, cellValue, index){
		 return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'
	}
}

针对这时候的解决方法可以使用el-popover

<el-table-column
  prop="name"
  label="伙伴名称">
  <template slot-scope="scope">
  	<div v-if="scope.row.name">
  		<el-popover
			v-if="scope.row.name.length > 7"
			placement="top"
			trigger="hover"
		>
			<span>{{scope.row.name}}</span>
			<span slot="reference" style="curosr:pointer">{{scope.row.name.slice(0,7)+"..."}}</span>
		</el-popover>
		<div v-else>{{scope.row.name}}</div>
  	</div>
  	<div v-else>--</div>
  </template>
</el-table-column>

3.使用原生的table，显示悬浮的展示代码如下

<td width="170" class="overClass" title="我就是展示用的">我是页面实际内容</td>
.overClass{
	 white-space:nowrap;
     text-overflow:ellipsis;
     overflow:hidden;
     width: 170px;
}