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

项目场景：

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

---

HTML布局：

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

---

布局样式：

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

.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 弄'

      }]