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

最后效果:

相关推荐
zhaoyin1994几秒前
Vue面试题笔记
javascript·vue.js·笔记
533_3 分钟前
[element-ui] el-tree 获取指定节点的父节点
前端·vue.js·elementui
坚持学习前端日记4 分钟前
Agent AI 前端技术架构设计文档
前端·javascript·人工智能·python
nibabaoo8 分钟前
前端开发攻略---Vue 3 实现视频小窗播放(画中画)效果的完整示例
前端·javascript·vue小窗播放
lqj_本人11 分钟前
基于 openYuanrong 的生成式推荐缓存高可用方向验证实践
前端·vue.js·缓存
英俊潇洒美少年26 分钟前
React Hook 钩子 useInsertionEffect、useLayoutEffect、useEffect的区别
前端·javascript·react.js
坚持学习前端日记30 分钟前
Agent AI 多模态交互与全场景架构设计
前端·javascript·人工智能·visual studio
向上的车轮39 分钟前
TypeScript 一日速通指南:以订单管理系统实战为核心
前端·javascript·typescript
yqzyy43 分钟前
Nginx 配置:alias 和 root 的区别
前端·javascript·nginx
冰糖雪梨dd1 小时前
【JavaScript】 substring()方法详解
开发语言·前端·javascript