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

最新推荐文章于 2023-10-25 17:00:13 发布

抠脚小弟

最新推荐文章于 2023-10-25 17:00:13 发布

阅读量445

点赞数

分类专栏： vue技术项目相关文章文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/ldoit/article/details/120524957

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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