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

<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 属性

 

posted @ 2024-09-19 16:51  gentsir  阅读(67)  评论(0编辑  收藏  举报