当前位置:   article > 正文

element-ui 表格el-table的列内容溢出省略显示,鼠标移上显示全部和定制样式_element plus 表格单元格自动省略

element plus 表格单元格自动省略

 

 1、在对应列加上省略显示show-overflow-tooltip属性,如果加上这属性,鼠标移上还是没效果,要考滤是不是层级的原因,被其他挡住了。
 

  1. :deep(.el-tooltip){
  2. position: relative;
  3. z-index:9;
  4. }
  1. <el-table-column label="用款渠道" min-width="170" prop="channel" show-overflow-tooltip>
  2. </el-table-column>

 效果如下图:



2、定制样式:
默认提示框主题色是黑色,如果想改成浅色和改变提示框的宽度,则需要加复盖样式:

  1. /*vue3复盖列内容溢出主题黑色改成浅色*/
  2. :deep(.el-popper.is-dark) {
  3. max-width:400px;
  4. color: #333;
  5. background: #fff;
  6. border: 1px solid #ddd;
  7. box-shadow: 0 2px 8px 0px rgba(0,0,0,0.1);
  8. }
  9. :deep(.el-popper.is-dark .el-popper__arrow::before) {
  10. border: 1px solid #ddd;
  11. background: #fff;
  12. }

最后效果:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/2023面试高手/article/detail/91814
推荐阅读