在table使用属性show-overflow-tooltip(当内容过长被隐藏时显示)展示效果不太好,样式也比较难改造,采取封装el-tooltip的方式处理,具体处理如下:
1、封装控件el-tooltip(自定义背景颜色[popper-class]、去掉箭头[visible-arrow])
<template>
<div>
<el-tooltip :disabled="isShowTooltip" popper-class="tips" :visible-arrow="false" class="tooltip" placement="bottom-start" effect="light">
<pre class="tooltip__tip" slot="content">{{ message }}</pre>
<div class="tooltip__words" @mouseenter="enterEvents">{{ message }}</div>
</el-tooltip>
</div>
</template>
<script>
export default {
data() {
return {
messageWord: '',
isShowTooltip: false
}
},
props: {
message: {
required: true
}
},
mounted() {
},
methods: {
enterEvents(e) {
let tableContentBoxWidth = e.target.getBoundingClientRect().width;
let tableContentWidth = this.getElementTextWidth(e.target);
if (tableContentWidth >= tableContentBoxWidth) {
this.isShowTooltip = false;
}else{
this.isShowTooltip = true
}
},
getElementTextWidth(el) {
const range = new Range();
range.selectNodeContents(el);
const width = range.getBoundingClientRect().width;
return width
}
}
}
</script>
<style lang="less" scoped>
.tips {
//自定义背景颜色
background: #83B8FE !important;
border-color: #DDDDDD !important;
}
.tooltip__words {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #343434;
}
.tooltip__tip {
max-width: 500px;
max-height: 300px;
overflow-y: auto;
white-space: pre-line;
line-height: 1.5;
font-size: 14px;
white-space: normal;
word-break: break-all;
padding: 5px;
margin: 0;
color: #343434;
}
.tooltip__tip::-webkit-scrollbar {
width: 6px;
}
.tooltip__tip::-webkit-scrollbar-thumb {
background: #ccc; // 滑块颜色
border-radius: 3px; // 滑块圆角
}
.tooltip__tip::-webkit-scrollbar-thumb:hover {
background: #fff; // 鼠标移入滑块颜色
}
.tooltip__tip::-webkit-scrollbar-track {
border-radius: 3px; // 轨道圆角
background-color: #888 // 轨道颜色 ;
}
</style>
2、在table里调用封装的控件
<template>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
<template slot-scope="scope">
<tooltip :message="scope.row.date"></tooltip>
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
<template slot-scope="scope">
<tooltip :message="scope.row.name"></tooltip>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址">
<template slot-scope="scope">
<tooltip :message="scope.row.address"></tooltip>
</template>
</el-table-column>
</el-table>
</template>
<script>
import tooltip from "@/components/tooltip";
export default {
components: { tooltip },
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
参考资料:
1、element-ui官方文档:https://element.faas.ele.me/#/zh-CN/component/tooltip
2、站内大佬文章:https://blog.csdn.net/qq_58441775/article/details/132220586?spm=1001.2014.3001.5506