若依前端vue使用之超长文本省略显示

其实我也不知道算不算vue的，反正就是自己遇到过的，都简单记录一下。欢迎大家指正~

做页面时，偶尔会遇到某个字段，数据特别多，比如我做课程管理，课程的简介就长短不定，有的好几十个字，不可能全部直接显示在页面上，否则一个页面也放不下几条数据了。为了美观，将其省略显示，用一个按钮站位，等鼠标移动到按钮上时，再显示全部内容。

代码如下：

<el-table-column label="简介" align="center" prop="kjMemo" >

<template slot-scope="scope">

<el-tooltip class="item" effect="dark" placement="bottom">

<div style="width: 600px;" slot="content">{{ scope.row.kjMemo }}</div>

<el-button>简介</el-button>

</el-tooltip>

</template>

</el-table-column>

页面功能实现如下：

注：

其中 effect="dark" 可以控制显示框的底色，有黑白两种可选择。