TRKJ/profitManage1.2
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

服务器管理列表列间距调整、PPPo的配置方式切换展示效果优化

Browse Source
This commit is contained in:
康冉冉
2026-01-13 18:52:57 +08:00
parent 7af2e86404
commit 43c8a84aba
3 changed files with 87 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/table/index.vue
+19 -8
View File
@@ -33,14 +33,14 @@
<div style="display: flex; align-items: center;">
<span>{{ column.label }}</span>
<template v-if="column.order === 'ascending'">
<i class="el-icon-sort-down" style="margin-left: 2px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
<i class="el-icon-sort-down" style="margin-left: 2px;margin-top: -2px;font-weight: 700;color: #c0c4cc;"></i>
<i class="el-icon-sort-up" style="color: #409EFF; margin-left: -8px;margin-top: 2px;font-weight: 700;"></i>
</template>
<template v-else-if="column.order === 'descending'">
<i class="el-icon-sort-down" style="color: #409EFF;margin-left: 2px;margin-top: 2px;font-weight: 700;"></i>
<i class="el-icon-sort-down" style="color: #409EFF;margin-left: -2px;margin-top: 2px;font-weight: 700;"></i>
<i class="el-icon-sort-up" style="margin-left: -8px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
</template>
<i v-else class="el-icon-sort" style="color: #C0C4CC;margin-left: 4px;margin-top: 2px;font-weight: 700;"></i>
<i v-else class="el-icon-sort" style="color: #C0C4CC;margin-left: 0;margin-top: 2px;font-weight: 700;"></i>
</div>
</template>
@@ -74,14 +74,14 @@
<div style="display: flex; align-items: center;">
<span>{{ column.label }}</span>
<template v-if="column.order === 'ascending'">
<i class="el-icon-sort-down" style="margin-left: 2px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
<i class="el-icon-sort-down" style="margin-left: -2px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
<i class="el-icon-sort-up" style="color: #409EFF;margin-left: -8px;margin-top: 2px;font-weight: 700;"></i>
</template>
<template v-else-if="column.order === 'descending'">
<i class="el-icon-sort-down" style="color: #409EFF;margin-left: 2px;margin-top: 2px;font-weight: 700;"></i>
<i class="el-icon-sort-down" style="color: #409EFF;margin-left: -2px;margin-top: 2px;font-weight: 700;"></i>
<i class="el-icon-sort-up" style="margin-left: -8px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
</template>
<i v-else class="el-icon-sort" style="color: #C0C4CC;margin-left: 4px;margin-top: 2px;font-weight: 700;"></i>
<i v-else class="el-icon-sort" style="color: #C0C4CC;margin-top: 2px;font-weight: 700;"></i>
</div>
</template>
<!-- 插槽 自定义列表内数据格式 -->
@@ -255,7 +255,7 @@
// 加上按钮间距（假设每个按钮左右有5px间距）
if (visibleButtonCount > 0) {
currentLineWidth += (visibleButtonCount - 1) * 10;
currentLineWidth += (visibleButtonCount - 1) * 5;
}
// 更新最大宽度
if (currentLineWidth > maxTotalWidth) {
@@ -266,7 +266,7 @@
maxTotalWidth = 20;
}
// 加上单元格内边距
return Math.max(maxTotalWidth + 40); // 最小宽度120px
return Math.max(maxTotalWidth + 30); // 最小宽度120px
},
// 计算单个按钮宽度（根据字符数）
@@ -542,9 +542,20 @@
background-color: #ffb98c!important;
}
::v-deep .el-table-column--selection .cell {
padding-left: 2px!important;
padding-right: 2px!important;
}
::v-deep .el-table th.el-table__cell > .cell {
padding-left: 2px!important;
padding-right: 2px!important;
}
::v-deep .el-table .cell {
padding-left: 0px!important;
padding-right: 0px!important;
}
::v-deep .el-button + .el-button {
margin-left: 5px!important;
}
</style>
<style>
.my-custom-tooltip {