el-table文字超出一行,隐藏多余文字,移入显示tips

7 阅读1分钟

给el-table-column设置 :show-overflow-tooltip="true" 属性可以使单元格超出的内容自动折叠显示,当鼠标移入时单元格的上方会自动弹出一个小tips来显示单元格得所有内容。

<el-table-column prop="taskName" label="任务名称" width="180" :show-overflow-tooltip="true" > 
    <template slot-scope="scope"> 
        <div class="attributionOrg">{{ scope.row.attributionOrg || "——" }}
        </div> 
    </template> 
</el-table-column>

如果想要有超过一行用省略号表示的样式,可添加如下样式

// 超过一行可以生略表示 
.attributionOrg { 
overflow: hidden; 
white-space: nowrap; 
text-overflow: ellipsis; 
}