我做了两个方案：
1.css版本（利用opacity）
<template><div class="container" ><table><thead><tr><th>表头</th></tr></thead><tbody><tr><td>今天<img src="../public/add.png" ></td></tr><tr><td>今天<img src="../public/add.png" ></td></tr><tr><td>今天<img src="../public/add.png" ></td></tr><tr><td>今天<img src="../public/add.png" ></td></tr></tbody></table></div></template><style lang="less" scoped>*{padding: 0;margin: 0;}.container table{width: 500px;tbody {width: 500px;tr {height: 4vh;line-height: 4vh;td{position: relative;img{position: absolute;height: 3vh;width: 3vh;top: 0.3vh;right:0;opacity: 0;}&:hover img{opacity: 1;}}}}}</style>
2. 利用mouseenter、mouseleave事件 v-show变量控制显示隐藏
<template><div class="container" ><table><thead><tr><th>表头</th></tr></thead><tbody><tr v-for="(item,index) in dayList" :key="index"><td v-on="{mouseenter:showImg,mouseleave:hiddenImg}">{{item}}<img src="../public/add.png" v-show="showPic"></td></tr></tbody></table></div></template><script>export default {data () {return {showPic: false,dayList: ['今天', '明天', '后天', '万天']}},methods:{showImg () {this.showPic = true},hiddenImg () {this.showPic = false}}}</script><style lang="less" scoped>*{padding: 0;margin: 0;}.container table{width: 500px;tbody {width: 500px;tr {height: 4vh;line-height: 4vh;td{position: relative;img{position: absolute;height: 3vh;width: 3vh;top: 0.3vh;right:0;opacity: 0;}&:hover img{opacity: 1;}}}}}</style>
