©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>项目场景：
要求在列表数据给指定数据添加一些标志，鼠标悬浮提示指定数据．左侧为标志截图．右侧为悬浮提示截图．
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 弄'
}]