使用场景:
element-table 表格列 自定义超出多少行 ... 显示 鼠标悬浮显示全部。
<template>
<div class='table-tips'>
<el-tooltip
placement="top"
v-model="showTooltip"
:open-delay="500"
effect="dark"
:disabled="!showTooltip">
<div slot="content">{{content}}</div>
<div @mouseenter="showTips($event, content)" class='myNote'>{{content}}</div>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'showTips',
components: {},
props: {
content: [String, Number],
default: ''
},
data() {
return {
showTooltip: false
};
},
methods: {
showTips(obj){
const cellWidth = obj.target.offsetHeight
const scrollHeight = obj.target.scrollHeight
scrollHeight <= cellWidth ? this.showTooltip = false : this.showTooltip = true
},
}
}
</script>
<style lang='less' scoped>
.myNote {
display:-webkit-box;
text-overflow:ellipsis;
overflow:hidden;
-webkit-line-clamp: 2;
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
}
</style>
使用示例:
import ShowTips from 'src/components/common/ShowTips.vue';
<ShowTips :content="formatData(scope.row, item)"/>