<>项目场景:

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

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

      }]

技术
今日推荐
PPT
阅读数 109
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信