Merge pull request #4397 from jumpserver/pr@dev@perf_reveiver

style: Set special receiver to optimize the scroll wheel display
This commit is contained in:
ZhaoJiSen 2024-10-12 11:35:16 +08:00 committed by GitHub
commit bde642570f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 5 deletions

View File

@ -593,3 +593,9 @@ li.rmenu i.fa {
height: 6px; /* 设置水平滚动条的高度 */
}
}
.black-theme-popover {
width: 300px;
max-height: 700px;
overflow-y: scroll;
}

View File

@ -26,11 +26,14 @@
</span>
</template>
</el-table-column>
<el-table-column :label="$tc('Receivers')" show-overflow-tooltip>
<template v-slot="scope">
<span v-if="!scope.row.children">
{{ scope.row.receivers.map(item => item.name).join(', ') }}
</span>
<el-table-column :label="$tc('Receivers')">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top" popper-class="black-theme-popover">
<p v-for="item in scope.row.receivers" :key="item.name">{{ item.name }}</p>
<span v-if="!scope.row.children" slot="reference" class="name-wrapper">
{{ scope.row.receivers.map(item => item.name).join(', ') }}
</span>
</el-popover>
</template>
</el-table-column>
<el-table-column :label="$tc('Actions')" width="200">
@ -186,4 +189,25 @@ export default {
margin-bottom: 0;
width: 50%;
}
::v-deep .el-table .cell {
display: flex;
.name-wrapper {
display: inline-block;
max-height: 55px;
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
cursor: pointer;
}
}
::v-deep .black-theme-popover .el-popover__inner {
background-color: #000 !important;
color: #fff !important;
border-color: #000 !important;
}
</style>