首页 新闻 赞助 找找看

H5+vue table 鼠标移入事件

0
悬赏园豆:100 [待解决问题]

源码是这样
<table border="1" cellspacing="0" style="line-height:50px;text-align:center">
<tr>
<td>姓名</td>
<td colspan="3" v-for="item in 50" :key="item">{{time[item-1]}}</td>
</tr>
<tr v-for="item in 5" :key="item">
<td >{{userName[item-1]}}</td>
//mouseover鼠标移入事件
//mouseleave鼠标移出事件
<td v-for="item in 150" :key="item" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="active">555555555</td>
</tr>
</table>
这是效果图

我遇到的问题是在一个时间对应三个列,现在要实现鼠标移入某一列时出现文字提示,但是我循环做的,后面不知道该怎么写了,帮帮菜菜吧

突的主页 | 菜鸟二级 | 园豆:453
提问于:2021-06-10 17:05
< >
分享
所有回答(2)
-1

鼠标移入的时候出现提示文字直接在 td 上用 title="提示文字" 属性就行了

如果需要自定义提示的样式就用 :hover

td .tip {
  display: none;
}

td:hover .tip {
  display: block;
}
by.Genesis | 园豆:2719 (老鸟四级) | 2021-06-10 17:31

因为每一个提示文字不一样所以很苦恼

支持(0) 反对(0) | 园豆:453 (菜鸟二级) | 2021-06-10 17:32

@酷酷k: 写个对象就是了噻

<td v-for="item in 150" :key="item" :title="titles[item]">

data() {
  return {
    titles: {
     1: '文字提示1',
     2: '文字提示2',
     3: '文字提示3',
      ...
     150: '文字提示150',
    }
  }
}
支持(0) 反对(0) by.Genesis | 园豆:2719 (老鸟四级) | 2021-06-10 17:53

@by.Genesis:数据是动态绑定的啊,150只是打个比方呢

支持(0) 反对(0) | 园豆:453 (菜鸟二级) | 2021-06-11 10:00

@酷酷k: 怎么个动态的你说啊

支持(0) 反对(0) by.Genesis | 园豆:2719 (老鸟四级) | 2021-06-11 10:42

@by.Genesis: 项目A需要150个提示
项目B有1000个提示,这个数据是后端获取来的,不是固定死的呀

支持(0) 反对(0) | 园豆:453 (菜鸟二级) | 2021-06-11 15:03
0

效果图

以下是源代码,简易版

| 园豆:453 (菜鸟二级) | 2021-06-16 16:10
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册