element Table表格 加了show-overflow-tooltip 之后没有显示省略号

需求：··在表格展示时，由于一个单元格中文字较多，可以进行缩略展示，并且鼠标hover时有悬浮提示框展示出完整的文字

一、问题

效果是只有鼠标悬浮提示，但没有将溢出的内容用省略号代替，此时的代码如下

element 表格 本身自带一个属性show-overflow-tooltip，添加这个属性会使其所在列的文字内容进行缩略展示并且鼠标经过可以弹出全部内容，现在的问题是，我在这个单元格加了slot-scope插槽，还有一些自定义的功能需要完成，发现如果使用slot-scope，在列下面如果又嵌套元素，会导致该show-overflow-tooltip属性虽然还会弹出展示全部内容但不会自动截断文字并展示省略（…）了。

二、解决问题

将原来的el-button改成a标签，并设置style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"将溢出的内容隐藏并用省略号代替

<el-table-column label="河流名称" :show-overflow-tooltip="true"

        prop="riverName" >

        <template slot-scope="scope">

          <a size="mini" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" type="text" @click="details(scope.row)">

            {{scope.row.riverName}}</a>

        </template>

      </el-table-column>

 

 这样便能成功将溢出的部分显示为省略（…）啦