.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>