当鼠标经过el-table 的单元格 就出现弹窗

情况：
当鼠标移动到table中某一个单元格的时候，出现弹窗
第一步 为每一个表格，设置一个弹窗div，一开始是隐藏的。
第二步 设置表格，鼠标进入与鼠标离开的函数，用来控制弹窗div的显隐。

<template>

      <div>

        <table>

          <tr v-for="item in tableData" :value="item.value"  :key="item">

            <td>          

              <div>            

                  <template>

                  {{item.id}}

                  </template>            

              </div>          

            </td>

            <td>   

              <div @mouseover="mouseenterHander(item.id)" @mouseout="mouseoutHander(item.id)">

                <template>

                  <template>

                  {{item.name.substr(0, 8)}}

                  </template>

                  <template v-if="item.name.length > 8">

                    ...

                  </template>

                </template>

              </div>

    <!-- 这个是弹窗，先设置在这儿        -->

              <div class="dpop" title="弹框" v-if="item.showFullName">

                  <template>

                      {{item.name}}

                  </template>

              </div>

            </td>

          </tr>

        </table>

      </div>

    </template>

    <script>

    const  tableData= [

              {

                id: 10,

                name: '欧美当地时间9月5日一早，大量网友纷纷反馈雅虎网站宕机，连带雅虎的邮件、搜索等服务也不可用。',

                showFullName: false,

              },

              {

                id: 20,

                name: '从地域分布看，欧洲是雅虎本次宕机故障的重灾区，尤其是法国、西班牙、英国、意大利等，还有美国东西部、新加坡、印度、菲律宾等地，我国主要集中在广州、台北及附近地区。 目前，雅虎尚未发表任何公开声明。',

                showFullName: false,

              }

            ] ;

      export default {

        data() {

          return {

           tableData

          }

        },

        methods: {

          say: function (message) {

          alert(message)

        },

    // 鼠标进来触发函数，就是控制div显示的变量showFullName 

          mouseenterHander(id) {        

            tableData.forEach(ele => {               

              if(ele.id == id) {

                ele.showFullName = true 

              }

            });

          },

    // 鼠标离开出发函数

          mouseoutHander(id) {        

            tableData.forEach(ele => {

              if(ele.id == id) {

                ele.showFullName = false 

              }

            });

          }

        }

      }

    </script>

    <style scoped>

    .dpop{

      position:absolute; 

      z-index:3;   

      border:1px dashed #EEF; 

      background:#EEE;

    }

    </style>