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> </template>
</el-table-column> </el-table-column>
<template v-for="(column, key, index) of columns"> <template v-for="(column, key, index) of columns">
<!-- customTooltip:true 走 自定义tooltip 展示 --> <!-- customTooltip:true 走 自定义tooltip 展示 -->
<template v-if="column.customTooltip"> <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"> <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"> <template #header="{ column }" v-if="column.sortable">
<div style="display: flex; align-items: center;"> <div style="display: flex; align-items: center;">
<span>{{ column.label }}</span> <span>{{ column.label }}</span>
<template v-if="column.order === 'ascending'"> <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> <i class="el-icon-sort-up" style="color: #409EFF; margin-left: -8px;margin-top: 2px;font-weight: 700;"></i>
</template> </template>
<template v-else-if="column.order === 'descending'"> <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> <i class="el-icon-sort-up" style="margin-left: -8px;margin-top: 2px;font-weight: 700;color: #c0c4cc;"></i>
</template> </template>
<i v-else class="el-icon-sort" style="color: #C0C4CC;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> </div>
</template> </template>
<template #default="scope"> <template #default="scope">
<el-tooltip <el-tooltip
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)" :disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
placement="top" placement="top"
effect="dark" effect="dark"
popper-class="my-custom-tooltip"> popper-class="my-custom-tooltip">
<div slot="content" v-html="formatCellContent(scope.row[key])"></div> <div slot="content" v-html="formatCellContent(scope.row[key])"></div>
<div :ref="`cell-${key}-${scope.row.id}`" class="cell-content"> <div :ref="`cell-${key}-${scope.row.id}`" class="cell-content">
{{ scope.row[key] }} {{ scope.row[key] }}
</div> </div>
</el-tooltip> </el-tooltip>
</template> </template>
</el-table-column> </el-table-column>
</template> </template>
<!-- 原tooltip展示逻辑 --> <!-- 原tooltip展示逻辑 -->
<template v-else> <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"> <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}) { handleSortChange({column, prop, order}) {
let sortType = 3; let sortType = 3;
if (order === 'ascending') { if (order === 'ascending') {
sortType = 1; sortType = this.columns[prop]['ascending'];
} else if (order === 'descending') { } else if (order === 'descending') {
sortType = 2; sortType = this.columns[prop]['descending'];
} }
this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType}); this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType});
}, },
@@ -564,11 +564,11 @@
} }
</style> </style>
<style> <style>
.my-custom-tooltip { .my-custom-tooltip > div {
box-sizing: border-box !important; box-sizing: border-box !important;
max-height: 300px !important; /* 设置最大高度 */ max-height: 300px !important; /* 设置最大高度 */
overflow-y: auto !important; /* 内容超出时显示垂直滚动条 */ overflow-y: auto !important; /* 内容超出时显示垂直滚动条 */
line-height: 1.5 !important; /* 设置行高，提升可读性 */ line-height: 1.5 !important; /* 设置行高，提升可读性 */
padding: 8px 12px !important; /* 设置内边距 */ /*padding: 8px 12px !important; !* 设置内边距 *!*/
} }
</style> </style>
src/views/resource/serverRegister/index.vue
+2 -2
View File
@@ -246,8 +246,8 @@
ip1Province: { label: `省1`, minWidth: '50',visible: true, disabled: true}, ip1Province: { label: `省1`, minWidth: '50',visible: true, disabled: true},
ip1PublicIp:{ label: `IP1`,minWidth: '100',visible: true, disabled: true}, ip1PublicIp:{ label: `IP1`,minWidth: '100',visible: true, disabled: true},
businessName: { label: `业务名称`, minWidth: '90', visible: true, disabled: true}, businessName: { label: `业务名称`, minWidth: '90', visible: true, disabled: true},
bandwidthResult: { label: `昨日95值`, minWidth: '75', visible: true, disabled: true, sortable: 'custom'}, bandwidthResult: { label: `昨日95值`, minWidth: '75', visible: true, disabled: true, sortable: 'custom', ascending: 1, descending: 2},
bandwidthRate: { label: `日95利用率`, minWidth: '75', visible: true, disabled: true}, 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}, reportedBandwidth: { label: `上报带宽值`, minWidth: '70', slotName: 'tempHandle', visible: true, disabled: true},
outboundRate: { label: `出省流量占比`, minWidth: '90', slotName: 'tempOutbound', visible: true, disabled: true}, outboundRate: { label: `出省流量占比`, minWidth: '90', slotName: 'tempOutbound', visible: true, disabled: true},
onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '60', 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: { proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy http://192.168.9.141:8080 // detail: https://cli.vuejs.org/config/#devserver-proxy http://192.168.9.141:8080
[process.env.VUE_APP_BASE_API]: { [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, changeOrigin: true,
pathRewrite: { pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: '' ['^' + process.env.VUE_APP_BASE_API]: ''