1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > element-ui 表格el-table的列内容溢出省略显示 鼠标移上显示全部和定制样式

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

时间:2024-04-04 01:12:15

相关推荐

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

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

:deep(.el-tooltip){position: relative;z-index:9;}

<el-table-column label="用款渠道" min-width="170" prop="channel" show-overflow-tooltip></el-table-column>

效果如下图:

2、定制样式:

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

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

最后效果:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。