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

最后效果:

相关推荐
han_15 小时前
从一道前端面试题,谈 JS 对象存储特点和运算符执行顺序
前端·javascript·面试
前端小超超16 小时前
ionic + vue3 + capacitor遇到backButton问题
前端·javascript·vue.js
EndingCoder17 小时前
枚举类型:常量集合的优雅管理
前端·javascript·typescript
起名时在学Aiifox17 小时前
从零实现前端数据格式化工具:以船员经验数据展示为例
前端·vue.js·typescript·es6
cute_ming17 小时前
关于基于nodeMap重构DOM的最佳实践
java·javascript·重构
码途潇潇18 小时前
JavaScript 中 ==、===、Object.is 以及 null、undefined、undeclared 的区别
前端·javascript
放牛的小伙18 小时前
vue 表格 vxe-table 加载数据的几种方式,更新数据的用法
vue.js
Sun_小杰杰哇18 小时前
Dayjs常用操作使用
开发语言·前端·javascript·typescript·vue·reactjs·anti-design-vue
basestone18 小时前
🚀 从重复 CRUD 到工程化封装:我是如何设计 useTableList 统一列表逻辑的
javascript·react.js·ant design
pas13618 小时前
25-mini-vue fragment & Text
前端·javascript·vue.js