Element——tooltip无效和自定义内容
tooltip无效
使用中发现，当tooltip内部元素内容为空，导致dom元素的wdth或height为0时，无法捕捉到鼠标悬浮动作，所以会失效
使用注意
- tooltip中需要有html元素
- 如果希望始终有tooltip内容，要给内部html元素设置默认宽高，使其可以被鼠标hover动作捕捉
- 自定义内容使用v-html和函数协作
<el-tooltip
effect="dark"
placement="right"
>
<div slot="content" v-html="tooltip(scope.$index + 1, cIndex)"></div>
<div class="cell-tooltip-span">
{{ gridView(scope.$index + 1, cIndex) }}
</div>
</el-tooltip>
<style>
tooltip() {
return function (r, c) {
let grid = this.dataForRender[r-1][c];
if(this.$attrs.type === 'rackInRefri' && grid.boxId) {
let output = `
冻存盒编号： ${grid.boxId}<br/>
样本数量： ${grid.used}份<br/>
空余位置： ${grid.total - grid.used}个
`
return output;
} else {
return `${this.transfer(r, this.rowCode)}-${this.transfer(
c,
this.colCode
)}`;
}
};
}
</style>