vue字符串长度超过某个值显示省略号 el-popover

1.第一种方法

<div class="text_26">{{item.itemName | ellipsis}}</div>

filters:{
  ellipsis(value){
    if (!value) return '';
    if (value.length > 5) {
      return value.slice(0,5) + '...'
    }
    return value
  }
},

2.第二种方法

{{item.createTime.length > 10?item.createTime.substring(0,10) : item.createTime}}

3.鼠标放上去显示全部

<el-tooltip popper-class="tipclass" :content=item.sou placement="top-start">
  <div class="cloStyleFour" style="margin-top:10px;">{{item.sou| ellipsis}}</div>
</el-tooltip>

4.el-tooltip自定义样式

<style>
  .tipclass[x-placement^="top"] .popper__arrow {
    border-top-color: #28B3F9 !important;
  }

  .tipclass[x-placement^="top"] .popper__arrow:after {
    border-top-color: #28B3F9 !important;
  }

  .tipclass-buttom[x-placement^="top"] .popper__arrow {
    border-top-color: #28B3F9 !important;
  }

  .tipclass-buttom[x-placement^="top"] .popper__arrow:after {
    border-top-color: #28B3F9 !important;
  }

  .tipclass {
    background: linear-gradient(180deg, rgba(19, 64, 115, 0.93) 0%, rgba(8, 30, 63, 0.93) 100%) !important;
    box-shadow: 0px 2px 14px 2px #082A52;
    border-radius: 2px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(28, 183, 255, 1), rgba(12, 129, 255, 1)) 1 1;
    backdrop-filter: blur(10px);
  }

  .tipclass-buttom {
    background: linear-gradient(180deg, rgba(19, 64, 115, 0.93) 0%, rgba(8, 30, 63, 0.93) 100%) !important;
    box-shadow: 0px 2px 14px 2px #082A52;
    border-radius: 2px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(28, 183, 255, 1), rgba(12, 129, 255, 1)) 1 1;
    backdrop-filter: blur(10px);
    color: #FFFFFF;
  }
</style>

如果放在去代码不生效

1. 相关链接：https://www.cnblogs.com/xiao987334176/p/14486272.html

2. 相关链接：https://blog.csdn.net/yelllowcong/article/details/112568372

显示内容自定义

<el-tooltip class="item" effect="dark" :content=item.itemName placement="top-start">
  <div class="text_26_3">{{item.itemName | ellipsis}}</div>
</el-tooltip>

注意：========