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

海綿寶寶_

已于 2023-02-13 17:36:41 修改

阅读量6.9k

点赞数 11

分类专栏： vue 文章标签： vue elementui

于 2022-09-03 17:09:06 首次发布

本文链接：https://blog.csdn.net/qq_45769187/article/details/126679386

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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