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

服务器管理列表中日95利用率字段添加排序功能

Browse Source 
1、服务器管理列表中日95利用率字段添加排序功能
2、优化列表中列的数据太长导致的文本提示框信息超出屏幕问题
This commit is contained in:
康冉冉
2026-03-03 17:24:54 +08:00
parent 4dad783731
commit 8f245c0395
3 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/table/index.vue
+35 -35
View File
@@ -26,38 +26,38 @@
</template>
</el-table-column>
<template v-for="(column, key, index) of columns">
<!-- customTooltip:true 走 自定义tooltip 展示 -->
<template v-if="column.customTooltip">
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
<template #header="{ column }" v-if="column.sortable">
<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-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-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-top: 2px;font-weight: 700;"></i>
</div>
</template>
<!-- customTooltip:true 走 自定义tooltip 展示 -->
<template v-if="column.customTooltip">
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :width="column.width" :min-width="column.minWidth || '100px'" align="left">
<template #header="{ column }" v-if="column.sortable">
<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-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-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-top: 2px;font-weight: 700;"></i>
</div>
</template>
<template #default="scope">
<el-tooltip
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
placement="top"
effect="dark"
popper-class="my-custom-tooltip">
<div slot="content" v-html="formatCellContent(scope.row[key])"></div>
<div :ref="`cell-${key}-${scope.row.id}`" class="cell-content">
{{ scope.row[key] }}
</div>
</el-tooltip>
</template>
</el-table-column>
</template>
<template #default="scope">
<el-tooltip
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
placement="top"
effect="dark"
popper-class="my-custom-tooltip">
<div slot="content" v-html="formatCellContent(scope.row[key])"></div>
<div :ref="`cell-${key}-${scope.row.id}`" class="cell-content">
{{ scope.row[key] }}
</div>
</el-tooltip>
</template>
</el-table-column>
</template>
<!-- 原tooltip展示逻辑 -->
<template v-else>
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :width="column.width" :min-width="column.minWidth || '100px'" align="left" :show-overflow-tooltip="true">
@@ -497,9 +497,9 @@
handleSortChange({column, prop, order}) {
let sortType = 3;
if (order === 'ascending') {
sortType = 1;
sortType = this.columns[prop]['ascending'];
} else if (order === 'descending') {
sortType = 2;
sortType = this.columns[prop]['descending'];
}
this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType});
},
@@ -564,11 +564,11 @@
}
</style>
<style>
.my-custom-tooltip {
.my-custom-tooltip > div {
box-sizing: border-box !important;
max-height: 300px !important; /* 设置最大高度 */
overflow-y: auto !important; /* 内容超出时显示垂直滚动条 */
line-height: 1.5 !important; /* 设置行高，提升可读性 */
padding: 8px 12px !important; /* 设置内边距 */
/*padding: 8px 12px !important; !* 设置内边距 *!*/
}
</style>