style(ui): 统一操作列文字字重和全站表格文字溢出提示
- 取消操作列内 el-link 默认加粗,统一为常规字体粗细,避免字体显得突兀 - 在 element-ui.scss 中新增样式覆盖 el-link 的 font-weight 为 normal - 全站表格开启 Element Plus 全局配置 showOverflowTooltip,统一显示单元格文字省略提示 - Avue 全局 crudOption 和手写表格均启用 showOverflowTooltip,覆盖所有相关表格列 - 通过 CSS 豁免操作列单元格不受 tooltip 固定宽度裁切影响,保证操作列内部链接显示完整 - 调整部分菜单宽度以适配视觉和布局需求 - 验证构建成功,无新增 CSS 警告,确保兼容性和功能正常
This commit is contained in:
@@ -75,6 +75,7 @@ app.use(store);
|
||||
app.use(router);
|
||||
app.use(ElementPlus, {
|
||||
locale: messages[language],
|
||||
table: { showOverflowTooltip: true },
|
||||
});
|
||||
app.use(Avue, {
|
||||
axios,
|
||||
@@ -86,6 +87,7 @@ app.use(Avue, {
|
||||
searchMenuSpan: 24,
|
||||
searchMenuPosition: 'right',
|
||||
menuWidth: 180,
|
||||
showOverflowTooltip: true,
|
||||
viewBtnIcon: ' ',
|
||||
editBtnIcon: ' ',
|
||||
copyBtnIcon: ' ',
|
||||
|
||||
@@ -205,6 +205,7 @@ export const createCrudOption = columns => ({
|
||||
dialogClickModal: false,
|
||||
menuFixed: 'right',
|
||||
menuWidth: 180,
|
||||
showOverflowTooltip: true,
|
||||
column: columns,
|
||||
});
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ export const option = {
|
||||
editBtn: false,
|
||||
delBtn: false,
|
||||
viewBtn: false,
|
||||
menuWidth: 320,
|
||||
menuWidth: 180,
|
||||
dialogClickModal: false,
|
||||
column: [
|
||||
{
|
||||
|
||||
@@ -573,6 +573,9 @@
|
||||
// 选择器同时覆盖 Avue 行菜单(.avue-crud__menu)与任意含 el-link 的表格体单元格(手写操作列)。
|
||||
.avue-crud__menu .el-link,
|
||||
.el-table .el-table__body .cell:has(.el-link) .el-link {
|
||||
// 覆盖 Element Plus el-link 默认的 font-weight: var(--el-font-weight-primary)(500 中等粗),
|
||||
// 操作列文字统一为常规字重,避免「查看/编辑/删除」等链接显得加粗。
|
||||
font-weight: normal;
|
||||
--el-link-text-color: var(--el-color-primary);
|
||||
--el-link-hover-text-color: var(--el-color-primary-light-3);
|
||||
--el-link-active-text-color: var(--el-color-primary-dark-2);
|
||||
@@ -596,6 +599,16 @@
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
// 全站统一:Element Plus 全局开启 show-overflow-tooltip 后,
|
||||
// 操作列单元格会被加上 .el-tooltip 类并写死宽度,导致内部 el-link 换行后被裁切。
|
||||
// 此处豁免操作列单元格:让 Avue 行菜单与手写表格操作列保持原有 flex 自动换行,不被固定宽度裁切。
|
||||
.el-table .cell.avue-crud__menu,
|
||||
.el-table .el-table__body .cell.el-tooltip:has(> .el-link) {
|
||||
width: auto !important;
|
||||
overflow: visible;
|
||||
text-overflow: clip;
|
||||
}
|
||||
|
||||
// 全站统一:Avue 内置行操作按钮(查看 / 编辑 / 删除 / 复制等)视觉对齐为 el-link 链接样式。
|
||||
// 选择器仅命中表格行操作列 .avue-crud__menu 内的 is-text 按钮,不误伤顶部工具栏(.avue-crud__header)
|
||||
// 与弹窗按钮(.avue-crud__dialog__menu)。事件(rowView/rowEdit/rowDel)与权限(permission 指令)
|
||||
|
||||
@@ -1343,7 +1343,6 @@ export default {
|
||||
.driver-page {
|
||||
&__identity {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
@@ -1425,7 +1425,7 @@ export default {
|
||||
editBtn: false,
|
||||
selection: true,
|
||||
dialogClickModal: false,
|
||||
menuWidth: 320,
|
||||
menuWidth: 260,
|
||||
column: [
|
||||
{
|
||||
label: '客商编号',
|
||||
|
||||
Reference in New Issue
Block a user