Element UI table超出文本部分显示省略号，鼠标悬浮显示全部内容

1、先看下效果图：

当鼠标放置在第二行地址上时，会显示地址信息的全部内容。

2、本网页是vue项目，依赖啥的就不说了，直接上table.vue详尽代码

<template>
  
		<div>
			 <el-button @click="resetDateFilter">清除日期过滤器</el-button>
			 <el-button @click="clearFilter">清除所有过滤器</el-button>
			 <el-table
					 ref="filterTable"
					 :data="tableData"
					 @cell-mouse-enter="showBox"
					 @cell-mouse-leave='hideBox'
					 stripe
					 style="width: 100%">
				 <el-table-column
						 prop="date"
						 label="日期"
						 sortable
						 width="180"
						 column-key="date"
						 :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
						 :filter-method="filterHandler"
				 >
				 </el-table-column>
				 <el-table-column
						 prop="name"
						 label="姓名"
						 width="180">
				 </el-table-column>
				 <el-table-column
						 prop="address"
						 label="地址"
						 :formatter="formatter">
					 <!-- 利用了作用域插槽，自定义了“地址”这一列 -->
					 <template slot-scope="scope">
						 <el-popover popper-class="area_popper" offset=-150 trigger="hover" :open-delay=0 :close-delay=0 placement="top" :disabled='isShowBox'>
							 <!-- 提示的文字框，显示所有的部门信息 -->
							 <p class="showText">{{ scope.row.address }}</p>
							 <!-- 利用三元表达式判断是否超过预期的长度 -->
							 <div slot="reference">{{ scope.row.address.length > 20? scope.row.address.slice(0, 20) + '...' : scope.row.address}}</div>
						 </el-popover>
					 </template>
				 </el-table-column>
				 <el-table-column
						 prop="tag"
						 label="标签"
						 width="100"
						 :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
						 :filter-method="filterTag"
						 filter-placement="bottom-end">
					 <template slot-scope="scope">
						 <el-tag
								 :type="scope.row.tag === '家' ? 'primary' : 'success'"
								 disable-transitions>{{scope.row.tag}}</el-tag>
					 </template>
				 </el-table-column>
			 </el-table>
	
	  </div>
</template>
<script>	
import tooltipDialog from "../../../components/tooltipDialog/index";
export default {
    data() {
      return {
		  isShowBox:false,
		  tableData: [{
			  date: '2016-05-02',
			  name: '王小虎',
			  address: '上海市普陀区金沙江路 1518 弄',
			  tag: '家'
		  }, {
			  date: '2016-05-04',
			  name: '王小虎',
			  address: '上海市普陀区金沙江路 1517 弄,天灵灵，地灵灵，菩萨不灵我最灵，我最灵啊我最灵,天上地下独一份啊，错过今天，后悔终生啊，买不了吃亏，买不了上当，抓紧时间，错过此刻，抱憾终生',
			  tag: '公司'
		  }, {
			  date: '2016-05-01',
			  name: '王小虎',
			  address: '上海市普陀区金沙江路 1519 弄',
			  tag: '家'
		  }, {
			  date: '2016-05-03',
			  name: '王小虎',
			  address: '上海市普陀区金沙江路 1516 弄',
			  tag: '公司'
		  }],
	  }
    },
    mounted() {
     
    },
    methods: {
		resetDateFilter() {
			this.$refs.filterTable.clearFilter('date');
		},
		clearFilter() {
			this.$refs.filterTable.clearFilter();
		},
		formatter(row, column) {
			return row.address;
		},
		filterTag(value, row) {
			return row.tag === value;
		},
		filterHandler(value, row, column) {
			const property = column['property'];
			return row[property] === value;
		},
		// 鼠标经过显示盒子
		showBox(row, column, cell, e) {
			console.log("cell : "+JSON.stringify(cell.cellIndex)+" length "+JSON.stringify(e.target.innerText.length))
			if(cell.cellIndex === 2 && e.target.innerText.length >= 20){
				this.isShowBox = false
			}
			else{
				this.isShowBox = true
			}
		},
		// 鼠标离开隐藏盒子
		hideBox(row, column, cell, e){
			this.isShowBox = true
		}
	},
    watch: {},
    created() {
 
    }
  }

</script>

<style scoped>
  h2{
    text-align: center;
/*    padding: 30px;
    font-size: 18px;
	font-family: '宋体'; */
  }
  #chart_example{
    width: 50%;
    height: 500px;
    border: 1px solid #ff0000;
    margin: 0 auto;
  }
  .dpop{
	  position:absolute;
	  z-index:3;
	  border:1px dashed #EEF;
	  background:#EEE;
  }
  .myNote{
	  display:-webkit-box;
	  text-overflow:ellipsis;
	  overflow:hidden;
	  -webkit-line-clamp: 2;
	  -webkit-box-orient:vertical;
  }

</style>

路漫漫其修远兮，吾将上下而求索，希望此篇文章对大家有参考意义......