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>
src/views/resource/serverRegister/index.vue
+2 -2
View File
@@ -246,8 +246,8 @@
ip1Province: { label: `省1`, minWidth: '50',visible: true, disabled: true},
ip1PublicIp:{ label: `IP1`,minWidth: '100',visible: true, disabled: true},
businessName: { label: `业务名称`, minWidth: '90', visible: true, disabled: true},
bandwidthResult: { label: `昨日95值`, minWidth: '75', visible: true, disabled: true, sortable: 'custom'},
bandwidthRate: { label: `日95利用率`, minWidth: '75', visible: true, disabled: true},
bandwidthResult: { label: `昨日95值`, minWidth: '75', visible: true, disabled: true, sortable: 'custom', ascending: 1, descending: 2},
bandwidthRate: { label: `日95利用率`, minWidth: '90', visible: true, disabled: true, sortable: 'custom', ascending: 5, descending: 6},
reportedBandwidth: { label: `上报带宽值`, minWidth: '70', slotName: 'tempHandle', visible: true, disabled: true},
outboundRate: { label: `出省流量占比`, minWidth: '90', slotName: 'tempOutbound', visible: true, disabled: true},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '60', visible: true, disabled: true},
vue.config.js
+2 -1
View File
@@ -33,7 +33,8 @@ module.exports = {
proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy http://192.168.9.141:8080
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.9.141:8080`,
// target: `http://192.168.9.138:8080`,
target: `http://172.16.15.51:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''