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;
}

最后效果:

相关推荐
wangdaoyin20103 分钟前
若依vue2前后端分离集成flowable
开发语言·前端·javascript
天天进步201533 分钟前
AI Agent 与流式处理:Motia 在生成式 AI 时代的后端范式
javascript
心柠35 分钟前
vue3相关知识总结
前端·javascript·vue.js
a1117762 小时前
图书借阅管理系统(FastAPI + Vue)
前端·vue.js·fastapi
常年游走在bug的边缘2 小时前
掌握JavaScript作用域:从函数作用域到块级作用域的演进与实践
开发语言·前端·javascript
极致♀雨2 小时前
vue2+elementUI table表格勾选行冻结/置顶
前端·javascript·vue.js·elementui
林shir2 小时前
3-15-前端Web实战(Vue工程化+ElementPlus)
前端·javascript·vue.js
John_ToDebug2 小时前
WebContent 与 WebView:深入解析浏览器渲染架构的双层设计
c++·chrome·ui
换日线°4 小时前
前端炫酷展开效果
前端·javascript·vue
CappuccinoRose5 小时前
React框架学习文档(七)
开发语言·前端·javascript·react.js·前端框架·reactjs·react router