element table表格 show-overflow-tooltip 过长设置局部样式

el-table-column标签里的 show-overflow-tooltip 生成的盒子一直在最外层,没有找到添加类名或者让元素插入到父元素的方法。

解决方法:去掉 show-overflow-tooltip 改用template里面的el-tooltip,给el-tooltip添加类名。

最后效果是这样:
element table表格 show-overflow-tooltip 过长设置局部样式_第1张图片
代码如下:

     //class-name='table-style'  class-name 给表格某一行添加类名 
     //popper-class='table-tooltip'  popper-class 给el-tooltip添加类名   
      <el-table-column prop="apr" class-name='table-style' label="111" align="center"> 
         <template slot-scope="scope">
            <el-tooltip popper-class='table-tooltip' :content="apr" placement="top">
                <div class="long_title">
                    <span>{{apr}}</span>
                </div>
            </el-tooltip>
         </template>
      </el-table-column>

style:

<style >
.table-tooltip{
    max-width: 200px;
}
.table-style .cell{
    width:200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>

你可能感兴趣的:(element-ui,vue.js,elementui,css)