el-table使用插槽时show-overflow-tooltip属性不生效解决方案

最新推荐文章于 2025-04-15 17:07:08 发布

莫物

最新推荐文章于 2025-04-15 17:07:08 发布

阅读量514

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45618937/article/details/140541853

版权

问题:

el-table使用了插槽后配置show-overflow-tooltip不生效

解决方案：

手动添加样式

 <el-table-column
   label="项目名称"
   align="center"
   width="120"
   :show-overflow-tooltip="showOverflowTooltip"
 >
   <template slot-scope="scope">
     <div v-for="(name,index) in scope.row.nameList" :key="index" :class="{ 'showOverflowTooltip': showOverflowTooltip }">
       {{ name}}
     </div>
   </template>
 </el-table-column>
 
<style lang="less" scoped>
.showOverflowTooltip {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>