el-tooltip多行显示/限制字数显示_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>