首页 > 其他分享 >Element UI 表格组件 el-table,给复选框增加悬浮提示

Element UI 表格组件 el-table,给复选框增加悬浮提示

时间:2024-09-19 16:45:25浏览次数:11  
标签:el setAttribute 复选框 cell UI table Element row

<el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          max-height="589"
          style="width: 100%; margin-bottom: 24px"
          v-if="activeName == '0'"
          @selection-change="handleSelectionChange"
          @filter-change="filterChange"
          @sort-change="sortChange"
          @cell-mouse-enter="cellMouseEnter"
          :key="activeName"
          :row-key="(row) => row.historyId"
        >
          <template slot="empty">
            <el-empty description="暂无数据" v-show="isEmpty" />
          </template>

          <el-table-column type="selection" reserve-selection :selectable="checkSelectTable" />
            ....
</el-table>
cellMouseEnter(row, column, cell, event) {
  if (column.type === 'selection') {
    if (row.isLastestSnapshot) {
      cell.setAttribute('title', '任务包含多副本时,禁止删除最新副本')
    }
    if (row.protectionLeft !== 0) {
      cell.setAttribute('title', '由于数据处于存储卷保护期内,无法删除或修改,请等待保护期结束后再尝试')
    }
  }
},

总结:通过 el-table 组件提供的 cell-mouse-enter 事件方法,获取复选框元素,再利用 document.setAttribute 方法设置  tittle 属性

 

标签:el,setAttribute,复选框,cell,UI,table,Element,row
From: https://www.cnblogs.com/gentsir/p/18420924

相关文章

  • OpenCV(cv::Sobel())
    目录1.函数定义2.工作原理2.1Sobel核2.2计算过程(1)x方向的Sobel卷积计算(2)y方向的Sobel卷积计算(3)合并x和y方向的梯度2.3示例3.示例4.使用场景总结cv::Sobel()是OpenCV中用于计算图像的梯度(边缘)的常用函数之一。它实现了Sobel滤波器,这是一种常见......
  • el-tabs 搭配 el-badge微章使用
    实现效果 实现: <el-tabsv-model="activeName"class="demo-tabs"@tab-click="handleClick"><el-tab-panelabel="审批中"name="inProcess"><InProcess/></el-tab-pane&......
  • flutter开发将项目从flutter版本3.19.6升级到3.24.3过程遇到问题记录Type 'Unmodifiab
    1.androidstudio修改当个项目的flutter版本,不影响其他项目工程的flutter编译版本1.1项目右上角点击‘设置’图标,选择Settings...进去到项目的设置页面,选择fluttersdk路径1.2项目右上角点击‘设置’图标,选择Settings...进去到项目的设置页面,选择dartsdk路径2.点开打开......
  • 服务的UUID
    1.UUID广播数据中,一般会包含一个UUID列表,用以展示自己支持的服务。但是GAP和GATT服务的UUID不能加到广播中。广播包中可以根据自身情况包含一部分服务的UUID或者包含所有服务的UUID。部分服务的UUID列表和完整的UUID列表只能包含一个。什么情况下包含部分UUID?广播数据无法容......
  • spring @cacheable 注解使用spel表达式
    这里主要讲一下复杂的spel表达式,简单的不写了解析集合集合需要先自定义一个方法,比如getAuthorsName,然后在注解里通过root.target.getAuthorsName把方法引用进去publicclassBookService{publicStringgetAuthorsName(List<Author>authors){returnauthors.s......
  • 在Windows10中使用rust的diesel库
    介绍最近在学习ActixWeb时,需要用到数据库操作,简单尝试了一下diesel,也遇到了一些问题。在这里记录一下,供大家参考。1.安装根据Diesel官网介绍,使用cargobinstall安装dieselcli。cargobinstalldiesel_cli如果报错error:nosuchcommand:`binstall`需要先安装cargo-bi......
  • 什么是DOM(Document Object Model),它有什么作用
    关注我,持续分享逻辑思维&管理思维&面试题;可提供大厂面试辅导、及定制化求职/在职/管理/架构辅导;推荐专栏《10天学会使用asp.net编程AI大模型》,目前已完成所有内容。一顿烧烤不到的费用,让人能紧跟时代的浪潮。从普通网站,到公众号、小程序,再到AI大模型网站。干货满满。学成后可......
  • Professional Linux Kernel Architecture(一)
    基于linux内核2.6.24版本,书籍:ProfessionalLinuxKernelArchitecture英文版(可在https://github.com/welldef/os_books.git下载)1一些概念1.1微内核和单体内核微内核:只有最基本的功能直接在中央内核(微内核)中实现。所有其他功能都委托给各自独立的进程,这些进程通过通信接口与......
  • C++Builder11的静态连接问题的解决
    1、问题用C++Builder11写了一个小程序,想将所有的运行包放在一个exe文件中,方便分发。但就是找不到原来版本中的Static-LinkC++RuntimeLibrary选项。2、经历(1)选择菜单project-options-C++linker去掉LinkwithDynamicRTL右边的√去掉>LinkwiththeDelphiRuntimeLibra......
  • 易优eyoucms网站详情页报错报错 \core\library\think\Loader.php 类不存在:app\co
    类不存在:app\common\model\Pic,这个错误表明PHP无法找到类 app\common\model\Pic。这通常是因为类文件未被正确加载或命名空间配置不正确导致的。以下是一些可能的解决步骤:1.确认类文件路径确保类文件 Pic 的路径正确并且文件存在。检查文件路径确认 app\common\model......