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

最后效果:

相关推荐
+VX:Fegn08951 分钟前
计算机毕业设计|基于springboot + vue健康茶饮销售管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
怒放的生命19917 分钟前
Vue 2 vs Vue 3对比 编译原理不同深度解析
前端·javascript·vue.js
小北方城市网20 分钟前
第7课:Vue 3应用性能优化与进阶实战——让你的应用更快、更流畅
前端·javascript·vue.js·ai·性能优化·正则表达式·json
2501_9160074737 分钟前
React Native 混淆在真项目中的方式,当 JS 和原生同时暴露
javascript·react native·react.js·ios·小程序·uni-app·iphone
Можно1 小时前
GET与POST深度解析:区别、适用场景与dataType选型指南
前端·javascript
爱上妖精的尾巴1 小时前
5-41 WPS JS宏 数组迭代基础测试与双数组迭代的使用方法测试
前端·javascript·wps
weixin_440730501 小时前
HTML中的css和js的书写样式
javascript·css·html
大学生资源网1 小时前
基于Vue的网上购物管理系统的设计与实现(java+vue+源码+文档)
java·前端·vue.js·spring boot·后端·源码
Swift社区2 小时前
用 RN 的渲染模型,反推 Vue 列表的正确拆分方式
前端·javascript·vue.js
光影少年2 小时前
前端开发桌面应用开发,Flutter 与 Electron如何选?
javascript·flutter·electron