element Descriptions 内容超出隐藏 Tooltip展示完整内容_el-steps中description过长

使用 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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

组件使用

<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>
1
2
3
4
5
6
7
8

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;
}
1
2
3
4
5
6
7
8
9