diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 1440718..7ec1472 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -1003,6 +1003,39 @@ td.el-table-fixed-column--right { text-overflow: clip; } +// 全站统一:内容型长文本列(文件名 / 单号 / 备注等)单元格内也放了 el-link, +// 会被上面两条「含 el-link 的单元格」规则一并命中,导致: +// ① 上面第 950 行的 display: flex 让链接成为 flex item,flex item 默认 min-width: auto 无法收缩, +// 超长文本(如未规范命名的附件名)会直接把列撑破; +// ② 豁免规则的 overflow: visible 让溢出内容不再被单元格裁切,直接压到相邻列上。 +// 因此对「内容列」做显式兜底:单元格自身恢复块级 + 省略号截断,链接参与收缩并显示省略号。 +// 用法:在 上配置 class-name="is-ellipsis-link"(动态列可 :class-name 绑定)。 +// 操作列不要加此类,否则会失去自动换行能力。 +.el-table .el-table__body .cell.is-ellipsis-link:has(.el-link) { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + .el-link { + display: inline-block; + min-width: 0; + max-width: 100%; + overflow: hidden; + vertical-align: middle; + + // Element Plus 的 el-link__inner 是 inline-flex,flex 容器上的 text-overflow 不生效, + // 必须降级为块级容器,省略号才会真正渲染出来。 + .el-link__inner { + display: block; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } +} + // 全站统一:Avue 内置行操作按钮(查看 / 编辑 / 删除 / 复制等)视觉对齐为 el-link 链接样式。 // 选择器仅命中表格行操作列 .avue-crud__menu 内的 is-text 按钮,不误伤顶部工具栏(.avue-crud__header) // 与弹窗按钮(.avue-crud__dialog__menu)。事件(rowView/rowEdit/rowDel)与权限(permission 指令) @@ -1261,3 +1294,6 @@ td.el-table-fixed-column--right { cursor: not-allowed; } } +.is-ellipsis-link{ + overflow: hidden; +} diff --git a/src/views/business/components/business-crud-page.vue b/src/views/business/components/business-crud-page.vue index 8410b87..92b7702 100644 --- a/src/views/business/components/business-crud-page.vue +++ b/src/views/business/components/business-crud-page.vue @@ -2065,7 +2065,13 @@ > - +