vue element-ui 表格固定高度
问题遇到的现象和发生背景
使用的element-ui 表格模板查询出数据后，在简介一项数据过多导致自适应高度过高，有没有办法固定高度显示部分内容鼠标移到对应的位置上显示全部信息
在这里添加过style属性，但是没有效果
下面这段组件代码可以实现你想要的功能，最后面的docs是使用示例
<template>
<div class="tooltip-div" @mouseover="mouseover(`tooltip`)">
<el-tooltip
:disabled="disableTooltip"
effect="light"
:open-delay="openDelay"
:popper-class="`tooltip${width}`"
>
<div slot="content" v-html="content"></div>
<div class="details" :style="{ '-webkit-line-clamp': maxRow }">
<label v-html="content" :ref="`tooltip`"></label>
</div>
</el-tooltip>
</div>
</template>
<script>
/**
* 内容溢出提示组件，当内容溢出时，显示的浮窗提示，可复制，可控制行数
* @description 内容溢出后的提示操作
* @property {String} content 显示的完整内容，无默认值
* @property {Number} maxRow 限制最大显示行数，默认值：2
* @property {Number} width = [20|40|60|80|100] 提示框宽度，偶数值百分比制，默认40,%不写
*
* @displayName 溢出浮窗
*/
export default {
name: "overFlowToolTip",
props: {
/**
* 显示的完整内容，不需要截取
*/
content: String,
/**
* 最大显示行数
*/
maxRow: {
type: Number,
default: 2,
},
/**
* 浮窗宽度,百分比制数值
* @values 20，40，60，80，100
*/
width: {
type: [String,Number],
default: 40,
},
/**
* 打开延时数，单位：ms
*/
openDelay:{
type: [String,Number],
default: 1000,
}
},
data: () => {
return {
// 是否禁用提示
disableTooltip: true,
};
},
methods: {
mouseover(refName) {
let parentHeight = this.$refs[refName].parentNode.offsetHeight;
let contentHeight = this.$refs[refName].offsetHeight;
// 判断是否开启tooltip功能
if (parentHeight - contentHeight < 0) {
this.disableTooltip = false;
} else {
this.disableTooltip = true;
}
},
},
};
</script>
<style>
/**
* 悬浮提示样式
*/
.tooltip20 {
border: 0 !important;
background: #f8f8f9 !important;
width: 20%;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.tooltip40 {
border: 0 !important;
background: #f8f8f9 !important;
width: 40%;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.tooltip60 {
border: 0 !important;
background: #f8f8f9 !important;
width: 60%;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.tooltip80 {
border: 0 !important;
background: #f8f8f9 !important;
width: 80%;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
.tooltip100 {
border: 0 !important;
background: #f8f8f9 !important;
width: 100%;
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
}
/**
* 小箭头样式
*/
.tooltip20[x-placement^="top"] .popper__arrow,
.tooltip20[x-placement^="top"] .popper__arrow:after {
border-top-color: #9ea7b4 !important;
}
.tooltip20[x-placement^="bottom"] .popper__arrow,
.tooltip20[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: #9ea7b4 !important;
}
.tooltip20[x-placement^="left"] .popper__arrow,
.tooltip20[x-placement^="left"] .popper__arrow:after {
border-left-color: #9ea7b4 !important;
}
.tooltip20[x-placement^="right"] .popper__arrow,
.tooltip20[x-placement^="right"] .popper__arrow:after {
border-right-color: #9ea7b4 !important;
}
.tooltip40[x-placement^="top"] .popper__arrow,
.tooltip40[x-placement^="top"] .popper__arrow:after {
border-top-color: #9ea7b4 !important;
}
.tooltip40[x-placement^="bottom"] .popper__arrow,
.tooltip40[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: #9ea7b4 !important;
}
.tooltip40[x-placement^="left"] .popper__arrow,
.tooltip40[x-placement^="left"] .popper__arrow:after {
border-left-color: #9ea7b4 !important;
}
.tooltip40[x-placement^="right"] .popper__arrow,
.tooltip40[x-placement^="right"] .popper__arrow:after {
border-right-color: #9ea7b4 !important;
}
.tooltip60[x-placement^="top"] .popper__arrow,
.tooltip60[x-placement^="top"] .popper__arrow:after {
border-top-color: #9ea7b4 !important;
}
.tooltip60[x-placement^="bottom"] .popper__arrow,
.tooltip60[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: #9ea7b4 !important;
}
.tooltip60[x-placement^="left"] .popper__arrow,
.tooltip60[x-placement^="left"] .popper__arrow:after {
border-left-color: #9ea7b4 !important;
}
.tooltip60[x-placement^="right"] .popper__arrow,
.tooltip60[x-placement^="right"] .popper__arrow:after {
border-right-color: #9ea7b4 !important;
}
.tooltip80[x-placement^="top"] .popper__arrow,
.tooltip80[x-placement^="top"] .popper__arrow:after {
border-top-color: #9ea7b4 !important;
}
.tooltip80[x-placement^="bottom"] .popper__arrow,
.tooltip80[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: #9ea7b4 !important;
}
.tooltip80[x-placement^="left"] .popper__arrow,
.tooltip80[x-placement^="left"] .popper__arrow:after {
border-left-color: #9ea7b4 !important;
}
.tooltip80[x-placement^="right"] .popper__arrow,
.tooltip80[x-placement^="right"] .popper__arrow:after {
border-right-color: #9ea7b4 !important;
}
.tooltip100[x-placement^="top"] .popper__arrow,
.tooltip100[x-placement^="top"] .popper__arrow:after {
border-top-color: #9ea7b4 !important;
}
.tooltip100[x-placement^="bottom"] .popper__arrow,
.tooltip100[x-placement^="bottom"] .popper__arrow:after {
border-bottom-color: #9ea7b4 !important;
}
.tooltip100[x-placement^="left"] .popper__arrow,
.tooltip100[x-placement^="left"] .popper__arrow:after {
border-left-color: #9ea7b4 !important;
}
.tooltip100[x-placement^="right"] .popper__arrow,
.tooltip100[x-placement^="right"] .popper__arrow:after {
border-right-color: #9ea7b4 !important;
}
.tooltip-div {
overflow: hidden;
}
/*溢出部分样式*/
.details {
width: 100%;
height: 100%;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 7px;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>
<docs>
<template>
<div>
<Tooltip :content="content" :maxRow="1"></Tooltip>
</div>
</template>
<script>
// 导入组件
import Tooltip from './overflow-tooltip'
export default {
components: {
Tooltip
},
data() {
return {
content: '人生因放下而精彩，放下自私，执念，元亨，在心底绽开一朵春节的莲花;让人生在宽容中释然一切，让心灵在禅意中回归，许放下，刹那花开'
}
}
}
</script>
</docs>
只需要在表格的el-table-column上加show-overflow-tooltip属性就可以了
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>