el-tooltip多行显示/限制字数显示

原创已于 2023-11-08 16:00:10 修改 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #vue.js

于 2023-04-26 09:11:41 首次发布

文章展示了如何在Vue.js应用中使用CSS和组件el-tooltip来实现文本溢出时的省略显示，并在鼠标悬停时显示完整内容。同时，文中提到了自定义过滤器用于处理时间戳转换和内容的截断。

.cell-ellipsis {
  display:-webkit-box;
  text-overflow:ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
}

//cell-ellipsis 展示表格文字的div不能有兄元素，只能有子元素

<template slot-scope="{row}">
    <el-tooltip class="item" effect="dark" placement="top-start">
        <template slot="content">
            <p style="max-width:500px">{{row.role_api_name}}</p>
        </template>
         <div class="cell-ellipsis">        
           <div class="" v-for="(v,index) in row.stock_info" :key="index*20">        
             {{v.stock_name+' '+v.stock_code}}
           </div>
    </el-tooltip>
</template>

//给el-table-column设置show-overflow-tooltip鼠标移入展示

el-tooltip限制字数显示

import Vue from 'vue'

// 时间戳转日期
Vue.filter('dateFormat', (dataStr, format = "yyyy-MM-dd HH:mm:ss") => {
    if (dataStr === '0' || !dataStr) {
        return '--'
    }
    return new Date(dataStr * 1000).format(format);
})
// 有无内容信息
Vue.filter('changeValue', value => {
    if (value === 0) {
        return value
    } else if (value === '0') {
        return value
    } else if (value) {
        return value
    } else {
        return '--'
    }
})
// 多出部分添加省略号
Vue.filter('ellipsis', (dataStr, num) => {
    if (dataStr === '0' || !dataStr) {
        return '--'
    }
    if (dataStr.length > num) {
        return dataStr.slice(0, num) + '...'
    }
    return dataStr
})

//main.js里
import '@/util/filter' // 过滤器


<el-table-column
    prop="content"
    label="内容"
    width="300"
>
  <template slot-scope="scope">
    <el-tooltip v-if="scope.row.content.length > 40" class="item" effect="dark"
      :content="scope.row.content" placement="top">
      <div>{{ scope.row.content | ellipsis(40) }}</div>
    </el-tooltip>
    <div v-else-if="scope.row.content.length <= 0">
      <span>--</span>
    </div>
    <div v-else>
      <span>{{ scope.row.content }}</span>
    </div>
  </template>
</el-table-column>