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

针对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>

最后看效果图：