vue项目实现鼠标移入显示表格，移出隐藏表格

1、生成ul-li列表

 <ul class="ul_list" style="margin-bottom:10px">
     <li v-for="(item,i) in PlanDatasInfo" :key="item" @mouseover="mouseOver($event,i,item.id)" @mouseleave ="mouseLeave(i)" >{{item.planNm}}</li>  
 </ul>

2、需要显示的表格

 <div id="atable" style="display:none;position: absolute;font-size:14px;"  class="tableDiv">
        <table cellspacing="0" width="100%" style="">
                <tbody>
                  <tr>
                    <th colspan="7" height="30" style="color: rgb(58, 130, 219); background-color: rgb(242, 246, 254);">机组优化运行频率流量范围及能耗指标</th>
                    </tr>
                    <tr>
                      <th height="30">控制指标</th>
                      <th colspan="2">单机供水</th>
                      <th colspan="2">双机供水</th>
                      <th colspan="2">三机供水</th>
                    </tr>
                </tbody>
         </table>
   </div>

如下表：

js代码如下：

 //鼠标移入li,显示相对于的表格数据
    mouseOver($event,i,id){
      var oLi =  document.getElementsByClassName("ul_list")//获取当前li
      var aTable = document.getElementById("atable");  //获取表格dom元素
      var x = $event.clientX;
      var y = $event.clientY;
      aTable.style.left = x+'px';
      aTable.style.top = y +'px';
      aTable.style.display = "block";
    },
    //鼠标移出li,隐藏表格数据
    mouseLeave(i){
      var aTable = document.getElementById("atable");  //获取表格dom元素
      aTable.style.display = "none";
    },