使用 el-descriptions 时，可能会出现内容过长导致换行的情况，如图
这样会导致整体很不美观，所以封装了一个组件来解决此问题
效果图
当内容过长时会隐藏超出部分，鼠标移上去Tooltip展示全部内容，内容未超出的，鼠标移上去不展示Tooltip
组件代码
<template><el-tooltip :content="value" :disabled="tooltipShow" placement="top-start"><span ref="content" @mouseover="isShowTooltip">{{value}}</span></el-tooltip>
</template><script>
export default {name: 'DescriptionsTooltip',props: ['value'],data () {return {tooltipShow: false}},methods: {isShowTooltip () {const bool = this.$refs.content.offsetWidth < this.$refs.content.parentNode.offsetWidththis.tooltipShow = bool}}
}
</script><style scoped></style>组件使用
<el-descriptions><el-descriptions-item label="内容超出隐藏"><descriptions-tooltip :value="'好长好长好长好长好长好长好长好长好长好长好长好长一段文字'"></descriptions-tooltip></el-descriptions-item><el-descriptions-item label="未超出无tooltip提示"><descriptions-tooltip :value="'不是很长的一段文字'"></descriptions-tooltip></el-descriptions-item>
</el-descriptions>
CSS部分
哪里用到组件 css 写到哪里，不是将 css 放到组件中
.el-descriptions__body .el-descriptions__table {white-space: nowrap;
}
.el-descriptions-item__content {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding-right: 8px;
}
