renderings
Effect: Some columns of text in el-table are too long, and I don’t want to use el-tooltip to display all of them. The text in the column involving the area exceeds two lines..., the text in the column involving the department exceeds three lines..., when the mouse is moved in, use the title attribute of the native HTML tag to display the entire text content of the cell
Implementation idea:
1. Judging the column that needs to be displayed for overflow, use v-if + slot-scope for processing
2. The title attribute of html is required to display all the text when the mouse is moved in
3.computed dynamic binding css
<el-table-column v-for="item in tableProps" :key="item.prop" :prop="item.prop" :label="item.label" align="center">
<template slot-scope="scope">
<div v-if="item.label === '涉及区域' || item.label === '涉及部门'"
:title="scope.row[item.prop] ? scope.row[item.prop] : ''"
:class="isEllipsis(item)">
{
{ scope.row[item.prop] }}
</div>
<div v-else>
{
{ scope.row[item.prop] }}
</div>
</template>
</el-table-column><script lang="ts">
import Vue from 'vue'
import { Component, Ref } from 'vue-property-decorator' // 引入装饰器
// 在Vue2的ts里面在方法前面写get就是计算属性
get isEllipsis() {
return function (item:any) {
let className:string[] = []
if(item.label === '涉及部门') {
className = ['overflow_text', 'text_hidden_3'] // 涉及部门是溢出3行显示...
} else if (item.label === '涉及区域') {
className = ['overflow_text', 'text_hidden_2'] // 涉及区域是溢出2行显示...
}
return className
}
}
</script>css：
.overflow_text {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text_hidden_3 {
-webkit-line-clamp: 3;
}
.text_hidden_2 {
-webkit-line-clamp: 2;
}