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