vue-element-admin项目表格单元格多行文字单独做省略并文字提示组件

最新推荐文章于 2023-07-16 23:17:53 发布

原创最新推荐文章于 2023-07-16 23:17:53 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

vue技术项目相关文章专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何在vue-element-admin项目中解决element表格使用el-tooltip时，无论文字是否省略都显示提示的问题。通过创建TextTips.vue组件，并在需要的页面引入和使用，实现了仅在文字省略时才显示提示的功能。

针对element表格使用el-tooltip时不管文字是否省略都会提示的解决

首先创建TextTips.vue文件，直接上代码：

<template>
  <!-- 文字提示 -->
  <div class="TextTips">
    <el-tooltip placement="top" v-if="TextWidth > TotalWidth">
      <div slot="content">
        <span>{{TextTitle}}</span>
      </div>
      <div class="ellipsis">
        <p>{{TextTitle}}</p>
      </div>
    </el-tooltip>
    <span v-else>{{TextTitle}}</span>
  </div>
</template>

<script>
export default {
  name:"TextTips",
  props:{
    Text:{
      type: String || Number,
      default: '',
    }
  },
  watch:{
    Text:{
      handler(val){
        this.TextTitle = val
      },
      immediate: true,
    }
  },
  data(){
    return{
      TextTitle:"",
      TotalWidth: null,
      TextWidth: null,
    }
  },
  mounted(){
    let TextTipsWidth = document.querySelector('.TextTips')
    this.TotalWidth = TextTipsWidth.offsetWidth; //盒子的总长度
    // 获取文字的实际长度(直接在页面写标签无法读取到准确文字所占宽度)
    let DomText = document.createElement('span');
    DomText.style.display = 'inline-block'
    DomText.style.visibility = 'hidden';
    DomText.textContent = this.TextTitle;
    document.body.appendChild(DomText);
    // console.log(DomText.clientWidth)
    this.TextWidth = DomText.clientWidth; // 文字的实际长度
    document.body.removeChild(DomText);
  },
}
</script>

<style lang="scss" scoped>
.TextTips{
  width: 100%;
  .ellipsis{
    p{
      margin: 0;
      width: 99%;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
</style>

完事之后在要使用的页面引入

import TextTips from '@/pageCommon/TextTips.vue' // 文字提示组件；
components: {
    TextTips
  },

在需要用到的地方这么用：

<text-tips :Text="`采购方：${scope.row.buying_name}`"></text-tips>

最后看效果图：
在这里插入图片描述