element-table 单元格内容过长省略、鼠标移到上面悬浮显示效果

原创已于 2025-01-10 16:10:34 修改

· 391 阅读

0 ·

版权

文章标签：

#前端 #vue #css

于 2025-01-10 16:05:53 首次发布

 <template>
     <el-table :data="tableData">
       <el-table-column label="Name">
         <template slot-scope="scope">
           <el-tooltip effect="dark" :content="scope.row.name" placement="top" popper-class="custom-tooltip">
             <div class="ellipsis">{{ scope.row.name }}</div>
           </el-tooltip>
         </template>
       </el-table-column>
       <el-table-column prop="age" label="Age"></el-table-column>
     </el-table>
   </template>

   <script>
   export default {
     data() {
       return {
         tableData: [
           { name: 'John Doe with a very long name that needs to be truncated', age: 25 },
           { name: 'Jane Smith', age: 30 }
         ]
       };
     }
   };
   </script>

   <style>
   .ellipsis {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     display: block; /* 确保块级元素 */
   }

   .custom-tooltip {
     width: 180px !important;
     height: 300px !important;
     background-color: orange !important;
     font-size: 12px !important;
     padding: 10px !important;
     color: black !important;
     overflow-y: auto !important;
   }
   </style>

注意样式：!important; 确保优先级，然后 <style> 使用了全局样式。这里不要使用 <style scope> 作用于当前文件。

解释

CSS 类 
.ellipsis：
white-space: nowrap;：防止文本换行。
overflow: hidden;：隐藏溢出的文本。
text-overflow: ellipsis;：在文本溢出时显示省略号。
display: block;：确保元素是块级元素，这样 el-tooltip 组件能够正确显示。
el-tooltip 组件：
effect="dark"：设置工具提示的样式效果。
:content="scope.row.name"：设置工具提示的内容为单元格的完整文本。
placement="top"：设置工具提示的位置为顶部。
popper-class="custom-tooltip"：通过 popper-class 属性传递自定义样式类。

自定义样式类 
custom-tooltip：
width: 180px !important：设置工具提示的宽度为 180px。
height: 300px !important：设置工具提示的高度为 300px。
background-color: orange !important：设置工具提示的背景色为橘黄色。
font-size: 12px !important：设置工具提示的文字大小为 12px。
padding: 10px !important：设置工具提示的内边距。
color: black !important：设置工具提示的文字颜色。
overflow-y: auto !important：设置工具提示内容超出高度时显示滚动条。
scoped-slot：

使用 scoped-slot 来自定义单元格的内容。
在 el-tooltip 组件中包裹一个 div 元素，并应用 ellipsis 类。