鼠标划入显示checkbox鼠标移出隐藏checkbox

最新推荐文章于 2024-02-06 16:42:24 发布

AllenLM

最新推荐文章于 2024-02-06 16:42:24 发布

阅读量515

点赞数

分类专栏：可复用组件文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/milinfeng/article/details/122459684

版权

可复用组件专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

以下为方法
  // 鼠标划入显示checkbox
  mouseenter(index: any, subList: any) {
    this[subList][index].hover = true;
  }
  // 鼠标移出隐藏checkbox
  mouseleave(index: any, subList: any) {
    this[subList][index].hover = false;
  }

以下为页面代码
      <td class="text" style="min-width:30px">
         <span @mouseenter="mouseenter(index, 'businessDeviseLedgerTable')"
               @mouseleave="mouseleave(index, 'businessDeviseLedgerTable')"
            >
           <a-checkbox  v-show="item.hover || item.checked"  v-model="item.checked" >
           </a-checkbox>
        <span v-show="!item.hover && !item.checked">{{ index + 1 }}</span>
         </span>
         </td>



  // 鼠标划入显示checkbox
  mouseenter(index: any) {
    console.log(index);
    this.externalChangeAccountChild[index].hover = true;
  }
  // 鼠标移出隐藏checkbox
  mouseleave(index: any) {
    console.log(index);
    this.externalChangeAccountChild[index].hover = false;
  }