当前位置: 首页 > news >正文

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

最后效果:

http://www.lryc.cn/news/114556.html

相关文章:

  • 研究人员发现特斯拉汽车能被越狱,可免费解锁付费功能
  • 【设计模式】责任链的基本概念及使用Predicate灵活构造校验链
  • Taro保存图片到手机
  • zookeeper --- 基础篇
  • Golang map 常用方法
  • 用于视觉跟踪的在线特征选择研究(Matlab代码实现)
  • Docker基本使用
  • PHP生成随机数
  • MongoDB:Unrecognized option: storage
  • Java基础九 - 异常
  • [国产MCU]-BL602开发实例-UART数据发送与接收
  • mac安装open3d时候出现错误
  • 打造本地户外装备小程序商城教程大揭秘
  • 在外SSH远程连接Ubuntu系统
  • GOTS标准速递---7.0 版将于2024年3月1日起全面生效
  • Ansible的安装和配置
  • 口-肠-脑轴与精神健康的关系
  • Dubbo是干嘛的,Dubbo原理和机制,Dubbo的核心组件
  • 自动zksync刷账户交互(附代码)
  • 荐读 | 《揭秘云计算与大数据》
  • RISC-V基础之内存分布与映射
  • 【Unity3D应用案例系列】Unity3D中实现文字转语音的工具开发
  • STM32入门——定时器
  • 企业工商信息:知识产权出质
  • batch_softmax_loss
  • 刘汉清:从生活到画布,宠物成为灵感源泉
  • 【LeetCode】240.搜索二维矩阵Ⅱ
  • SED正则表达式中[方括号]的特殊处理
  • Android 音频开发
  • Java8新特性,Lambda,Stream流