element-ui的popover碰到超出隐藏的table数据展示异常, 该怎么处理呢 ?

Question

<template>
  <el-table :data="gridData" border stripe>
    <el-table-column label="测试" :width="100">
      <template>
        <el-popover placement="right" width="400" trigger="hover">
          <el-table :data="gridData">
            <el-table-column width="150" property="date" label="日期"></el-table-column>
            <el-table-column width="100" property="name" label="姓名"></el-table-column>
            <el-table-column width="300" property="address" label="地址"></el-table-column>
          </el-table>
          <span slot="reference"
            style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap; ">1111111111111111111111111111111111111111</span>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>

</template>

<script>
export default {
  data() {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }]
    };
  }
};
</script>