服务器带宽收益和交换机带宽收益列表搜索条件多次搜索后无反应问题、服务器管理、拓扑管理
1、服务器带宽收益和交换机带宽收益列表搜索条件多次搜索后无反应问题 2、table列表替换排序图标以及功能的实现方法，解决控制台提示的警告信息 3、服务器管理模块下选择业务Ip的表单字段展示、传参以及接口修改 4、优化拓扑管理表单接口查询、列表对端交换机名称字段修改
This commit is contained in:
康冉冉
@@ -28,7 +28,22 @@
|
||||
<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" :render-header="renderHeader" :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">
|
||||
<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-left: 4px;margin-top: 2px;font-weight: 700;"></i>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #default="scope">
|
||||
<el-tooltip
|
||||
:disabled="!isCellOverflow(scope.row[key], `cell-${key}-${scope.row.id}`)"
|
||||
@@ -45,7 +60,7 @@
|
||||
</template>
|
||||
<!-- 原tooltip展示逻辑 -->
|
||||
<template v-else>
|
||||
<el-table-column v-if="column && column.visible" :label="column.label" :key="key" :prop="key" :sortable="column.sortable" :render-header="renderHeader" :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">
|
||||
<!-- 插槽 自定义列表表头数据格式 -->
|
||||
<template #header v-if="column && column.slotHeaderName">
|
||||
<span>{{column.label}}</span>
|
||||
@@ -54,6 +69,21 @@
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<!-- 插槽 自定义列表表头的排序图标按钮 -->
|
||||
<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-left: 4px;margin-top: 2px;font-weight: 700;"></i>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 插槽 自定义列表内数据格式 -->
|
||||
<template #default="scope" v-if="column && column.slotName">
|
||||
<!-- 传递行数据、行索引等信息到父组件的插槽 -->
|
||||
@@ -70,7 +100,7 @@
|
||||
</template>
|
||||
</template>
|
||||
<!-- 表格行内按钮 -->
|
||||
<el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="calculateOperationColumnWidth(config.tableButton.line, tableList)" label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
|
||||
<el-table-column v-if="config && config.tableButton && config.tableButton.line" :width="calculateOperationColumnWidth(config.tableButton.line, tableList)" label="操作" fixed="right" align="center" class-name="small-padding fixed-width handleContSty">
|
||||
<template #default="scope">
|
||||
<template v-for="item of config.tableButton.line">
|
||||
<template v-if="item && item.more && item.more.length > 0 && checkPermi(item.hasPermi)">
|
||||
@@ -459,42 +489,6 @@
|
||||
}
|
||||
this.$emit("fnClick", {fnCode: 'sortTable'}, {sortType: sortType});
|
||||
},
|
||||
// 排序图标替换
|
||||
renderHeader(h, { column, $index }) {
|
||||
if (column && column.sortable) {
|
||||
if (column.order === 'ascending') {
|
||||
// 升序图标
|
||||
return (
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span>{column.label}</span>
|
||||
<i class="el-icon-sort-down" style="margin-left: 2px;font-weight: 700;color: #c0c4cc;"></i>
|
||||
<i class="el-icon-sort-up" style="color: #409EFF; margin-left: -8px;font-weight: 700;"></i>
|
||||
</div>
|
||||
);
|
||||
} else if (column.order === 'descending') {
|
||||
// 降序图标
|
||||
return (
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span>{column.label}</span>
|
||||
<i class="el-icon-sort-down" style="color: #409EFF; margin-left: 2px;font-weight: 700;"></i>
|
||||
<i class="el-icon-sort-up" style="margin-left: -8px;font-weight: 700;color: #c0c4cc;"></i>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
// 默认状态（无序）
|
||||
return (
|
||||
<div style="display: flex; align-items: center;">
|
||||
<span>{column.label}</span>
|
||||
<i class="el-icon-sort" style="color: #C0C4CC; margin-left: 4px;font-weight: 700;"></i>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
return h('div', [
|
||||
h('span', column.label), // 标题文本
|
||||
// h('i', { class: iconClass }) // 排序图标
|
||||
]);
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -517,6 +511,9 @@
|
||||
::v-deep .caret-wrapper {
|
||||
display: none !important;
|
||||
}
|
||||
::v-deep .handleContSty .cell{
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.my-custom-tooltip {
|
||||
|
||||
Reference in New Issue
Block a user