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

最后效果:

相关推荐
多加点辣也没关系15 分钟前
JavaScript|第9章:对象 — 基础
开发语言·javascript·ecmascript
用户831348593069833 分钟前
Cesium自定义可调节星空夜景+星星闪烁
vue.js·cesium
后台开发者Ethan1 小时前
setState组件更新
前端·javascript·react
蜡台2 小时前
uniapp vue2 转 vue3
前端·javascript·uni-app·vue3·vue2
WindfallSheng2 小时前
从Vibe Coding到Spec Coding:一套可落地的AI-SDD企业级研发实战工程
javascript·vue.js
Asize3 小时前
Agent 入门:从 LLM 与 Agent 的区别到 Function Calling
javascript·人工智能
我有满天星辰3 小时前
Vue 指令完全指南:从 Vue 2 到 Vue 3 的演进与实战
前端·javascript·vue.js
小白学过的代码3 小时前
# flv.js / mpegts.js 播不了国标摄像头(H.265 + G.711A)?纯前端 Jessibuca 无后端方案(附完整代码)
前端·javascript·h.265
不爱记笔记4 小时前
GPT-5.6 Sol 真实项目实测!Bug修复、UI重构与帆船游戏复刻
人工智能·gpt·ui·chatgpt·bug·openai
我有满天星辰6 小时前
Vue 3 响应式双雄:ref 与 reactive 完全指南
前端·javascript·vue.js