element中el-table的tooltip鼠标无法选中text

<!--引入table-tooltip的组件-->
<template>
<div class="home">
<!-- <button class="btn gray">这是个按钮</button> -->
<el-table
:data="tableData"
stripe
style="width: 100%"
@cell-mouse-enter="showTooltip"
@cell-mouse-leave="hiddenTooltip">
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<table-tooltip :tableCellMouse="tableCellMouse"></table-tooltip>
</div>
</template>

<script>
import tableTooltip from './table-tooltip'

export default {
name: 'home',
components: {
tableTooltip
},
data() {
return {
tableData: [{
address: '上海市这段文本超长超长超长的普陀区金沙江路 1518 弄'
}}],
tableCellMouse: {
cellDom: null, // 鼠标移入的cell-dom
hidden: null, // 是否移除单元格
row: null, // 行数据
},
}
},
methods: {
// 鼠标移入cell
showTooltip(row, column, cell) {
this.tableCellMouse.cellDom = cell;
this.tableCellMouse.row = row;
this.tableCellMouse.hidden = false;
},

// 鼠标移出cell
hiddenTooltip() {
this.tableCellMouse.hidden = true;
}
}
}
</script>

<style lang="scss">
// 定义单元格文本超出不换行
.el-table .cell {
overflow: hidden !important;
white-space: nowrap !important;
}
</style>

 

 

 

<!--table-tooltip.vue-->
<template>
<!-- 文案溢出，显示tooltip -->
<div id="table-toolTip" class="el-tooltip__popper is-dark" style="transform-origin: center top; z-index: 2003; position: fixed; display: none;">
{{ tableCellTooltipText }}
<div id="toolTip-arrow" class="popper__arrow"></div>
</div>
</template>

<script>
export default {
props: {
tableCellMouse: {
type: Object,
default() {
return {};
},
}
},

data() {
return {
toolDom: null,
arrowDom: null,
tableCellTooltipText: null, // 溢出文案
mouseLeaveVal: {
tooltip: 0, // 1-鼠标移入，2-鼠标移出，0-无焦点
cell: false // 单元格
}
};
},

computed: {},

watch: {
mouseLeaveVal: {
deep: true,
handler(nv) {
setTimeout(() => {
if (nv.cell && 1 != nv.tooltip) {
this.toogleActiveTooltip(false, this.toolDom);
}
}, 100);
}
},

tableCellMouse: {
deep: true,
handler(nv, ov) {
if (nv.hidden) {
this.hiddenTooltip();
} else if (nv.row && !nv.hidden) {
this.showTooltip(nv.cellDom);
}
}

}
},

created() {},

mounted() {
this.$nextTick(() => {
this.toolDom = document.getElementById("table-toolTip");
this.arrowDom = document.getElementById("toolTip-arrow");
const _this = this;
this.toolDom.addEventListener("mouseleave", event => {
_this.mouseLeaveVal.tooltip = 2;
});
this.toolDom.addEventListener("mouseenter", event => {
_this.mouseLeaveVal.tooltip = 1;
});
});
},

methods: {
// 文字溢出显示tooltip 动态计算top和left
showTooltip(cell) {
this.tableCellTooltipText = cell.innerText || cell.textContent;
const textWidth = this.textSize("12px", this.tableCellTooltipText);
if (textWidth > cell.clientWidth - 25) {
const cellLeft = cell.getBoundingClientRect().left,
cellTop = cell.getBoundingClientRect().top;
const computedPositonNum = this.hiddenToolPosition(textWidth, cell.clientWidth, cellLeft, cellTop);
this.toolDom.style.top = `${computedPositonNum.top}px`;
this.toolDom.style.left = `${computedPositonNum.left}px`;
this.toolDom.style.width = `${computedPositonNum.width}px`;
this.arrowDom.style.left = `${computedPositonNum.arrowLeft}px`;
this.toogleActiveTooltip(true, this.toolDom);
this.mouseLeaveVal.cell = false;
this.mouseLeaveVal.tooltip = 0;
this.toolDom.style.display = "";
} else {
this.toolDom.style.display = "none";
}
},

// toolTip定位计算
hiddenToolPosition(txtWidth, cellWidth, cellLeft, cellTop) {
const toolHight = Math.ceil((txtWidth + 8) / 310) * 24 + 20,
toolWidth = 300 < txtWidth ? 350 : (txtWidth + 50),
webWidth = document.body.offsetWidth;
// webHeight = document.body.offsetHeight;
let expectLeft = cellLeft - (toolWidth - cellWidth) / 2;
const toolWidthAndLeft = expectLeft + toolWidth,
expectTop = cellTop - toolHight;
let arrowLeft; // arrow left
if (toolWidthAndLeft > webWidth) {
const moreWidth = toolWidthAndLeft - webWidth;
expectLeft -= (toolWidthAndLeft - webWidth);
arrowLeft = (toolWidth - moreWidth) / 2 + moreWidth - 6;
} else {
arrowLeft = (toolWidth / 2) - 6;
}
return { left: expectLeft, top: expectTop, width: toolWidth, arrowLeft };
},

hiddenTooltip() {
this.mouseLeaveVal.cell = true;
},

//tooltip样式
toogleActiveTooltip(show, toolDom) {
if (show) {
toolDom.classList.add("el-fade-in-linear-enter-active", "el-fade-in-linear-enter-to", 'el-popper');
setTimeout(() => {
toolDom.classList.remove("el-fade-in-linear-enter-active", "el-fade-in-linear-enter-to");
}, 500);
toolDom.style.display = "";
} else {
toolDom.classList.add("el-fade-in-linear-leave-active", "el-fade-in-linear-leave-to");
setTimeout(() => {
toolDom.classList.remove("el-fade-in-linear-leave-active", "el-fade-in-linear-leave-to", 'el-popper');
}, 500);
toolDom.style.display = "none";
}
},

textSize(fontSize, text) {
const span = document.createElement("span");
let width = span.offsetWidth;
span.style.visibility = "hidden";
span.style.fontSize = fontSize;
span.style.display = "inline-block";
document.body.appendChild(span);
if ("undefined" != typeof span.textContent) {
span.textContent = text;
} else {
span.innerText = text;
}
width = Math.ceil(span.clientWidth);
document.body.removeChild(span);
return width;
},
}
};
</script>

<style lang="scss" scoped>
#table-toolTip {
.el-tooltip__popper {
max-width: 350px !important;
box-sizing: border-box;
}
.popper__arrow {
bottom: -6px;
left: 50%;
margin-right: 3px;
border-bottom-width: 0;
border-top-color: $blue;
&::after {
border-bottom-width: 0;
border-top-color: $blue-dark-90;
bottom: 1px;
margin-left: -6px;
}
}
}
</style>

 

__EOF__

本文作者：小兔
本文链接：https://www.cnblogs.com/g-14/p/16506259.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！