element ui tooltips不显示的bug
form表单中一刷新页面input为什么会自动校验,明明是有值的,也提示必填
但是手输之后又是正常校验
原因:
初始化没有响应式,因为addFields里面没有写这个初始化的变量
解决办法:
让其响应式,初始化addFields里面添加此变量,
或者用 对象set的方式
// this.addFields.passNoticeTime = !!data ? data.passNoticeTime : 0(错误写法)
this.$set(this.addFields, 'passNoticeTime', !!data ? data.passNoticeTime : 0)
table中tooltip问题
table本身有自己的属性,可以控制超长就...,鼠标放上去就显示tooltip
属性 showOverflowTooltip = true即可
但是,如果是表格format的话,比如日期 formatDate,,这是溢出不会显示 个人认为这是element的一个bug
原因:查看element table的源码 table-body.js
表格要显示 tooltips的两个前提就是
handleCellMouseEnter(event, row) {
const table = this.table;
// 判断是否text-overflow, 如果是就显示tooltip
const cellChild = event.target.querySelector('.cell');
if (!(hasClass(cellChild, 'el-tooltip') && cellChild.childNodes.length)) {
return;
}
const rangeWidth = range.getBoundingClientRect().width;
const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0) +
(parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0);
if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) && this.$refs.tooltip) {
const tooltip = this.$refs.tooltip;
// TODO 会引起整个 Table 的重新渲染,需要优化
this.tooltipContent = cell.innerText || cell.textContent;
tooltip.referenceElm = cell;
tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none');
tooltip.doDestroy();
tooltip.setExpectedState(true);
this.activateTooltip(tooltip);
}
},
1.需要class=cell
2.需要el-tooltip属性
但是表格单元格里面自带了一个class的属性,然后在format的组件又加一个cell的话,他实际是找不到后者的,所以鼠标放上去的时候,不会显示tooltip
解决办法
在format组件中添加 .cell 和 .el-tooltip class
然后在初始化的时候 用dom操作删除掉父元素的 class cell即可
mounted(){
// fix: #104479 el-table 通过 cell 和 el-tooltip 类名判断 overflow 逻辑
if (this.from=="table") {
this.$el.parentElement.parentElement.className = '';
}
}
如果有样式也会影响tooltip的显示
backdrop-filter:blur(5px)