|
鼠标事件进行监听 需求中，在一个table(组件)表中，对于其中一列(该列为图片列)，当鼠标划过该列的某个单元格子(图片)时，需要展示出该单元格子对应的遮罩层 翻阅了一些博客，发现好多都提到了mouse事件，如mouseover、mouseout、mouseenter、mouseleave，在之后我自己也通过这种方法进行了尝试。 template el-table :data="tableData" stripe el-table-column prop="pic" label="图片" width="180" template slot-scope="scope" div slot="wrapper" class="name-wrapper" div class="img-mask" @click="toShowDialog(props.row)" :ref="'mask' + props.rowIndex"文字/div div @mouseover="changeMask(props.rowIndex)" @mouseout="changeMask(props.rowIndex)" img src="..." /div /div /template /el-table-column /el-table/template...changeMask(index) { let vm = this; let mask = vm.$refs['mask' + index]; if(mask.style.display == 'none') { mask.style.display = 'block'; }else { mask.style.display = 'none'; }} 最后在查…… | 
转播
