vue2在element UI的table中给指定列添加圆点标志，鼠标悬浮出提示信息

项目场景：

要求在列表数据给指定数据添加一些标志，鼠标悬浮提示指定数据．左侧为标志截图．右侧为悬浮提示截图．

HTML布局：

在template中想要添加标志的那一列添加圆点和悬浮提示信息两个节点，并添加单元格进入　退出事件两个事件．

  <!-- 悬浮提示信息 -->
    <div id="hoverTip" class="hover-style-left"></div>
    <el-table
      border
      :data="tableData"
      style="width: 30%"
      @cell-mouse-enter="enter"
      @cell-mouse-leave="leave"
    >
      <el-table-column label="序号" prop="id" width="60" align="center">
        <template slot-scope="scope">
          <!-- 圆点 -->
          <span
            :id="'circle'+scope.row.id"
            v-if="scope.row.id%2==0"
            class="circle"
            style="background: #faab00;"
          ></span>
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <el-table-column prop="date" label="日期" width="100"></el-table-column>
    </el-table>

布局样式：

具体使用时样式细微处自行调节

.circle {
  position: absolute;
  top: 17px;
  left: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
}
.hover-style-left {
  height: 40px;
  min-width: 200px;
  padding: 10px;
  display: none;
  color: #faab00;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  border: 1px solid #ffdd81;
  background: #fff8f0;
  position: absolute;
  z-index: 10;
  box-shadow: 0px 2px 4px 0px rgba(226, 199, 46, 0.18);
  border-radius: 4px;
}

.hover-style-left:after,
.hover-style-left:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 10px;
  top: 19px;
  left: -21px;
  border-style: solid dashed dashed solid;
  border-color: transparent #ffdd81 transparent transparent;
}

.hover-style-left:after {
  left: -20px;
  border-color: transparent #fff8f0 transparent transparent;
}

单元格事件：

给单元格移入事件设置悬浮相对位置．注意：展示方法提示节点固定展示在该单元格中间位置．

如需展示在鼠标位置可以利用cell-mouse-enter方法的第四个event参数获取鼠标位置实现．

enter (row, column) {
      if (column.property == 'id') {
        let id = row.id;
        let x = document.getElementById('circle' + id).getBoundingClientRect().x
        let y = document.getElementById('circle' + id).getBoundingClientRect().y
        document.getElementById('hoverTip').removeAttribute('class', 'hover-style-left')
        document.getElementById('hoverTip').style.left = x + 50 + 'px'
        document.getElementById('hoverTip').style.top = y - 25 + 'px'
        document.getElementById('hoverTip').innerHTML = '悬浮提示信息'
        document.getElementById('hoverTip').setAttribute('class', 'hover-style-left')
        document.getElementById('hoverTip').style.display = 'block'
      }
    },
    leave () {
      document.getElementById('hoverTip').style.display = 'none'
    }

该标志会根据数据自行判断是否出现，具体逻辑需要根据需求自行修改．以上仅为举例说明，我使用的数据为

 tableData: [{

        id: 1,

        date: '2016-05-02',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1518 弄'

      }, {

        id: 2,

        date: '2016-05-04',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1517 弄'

      }, {

        id: 3,

        date: '2016-05-01',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1519 弄'

      }, {

        id: 4,

        date: '2016-05-03',

        name: '王小虎',

        address: '上海市普陀区金沙江路 1516 弄'

      }]