element Descriptions 内容超出隐藏 Tooltip展示完整内容

使用 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.offsetWidth
      this.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;
}