diff --git a/nezha-fronted/src/assets/stylus/main.scss b/nezha-fronted/src/assets/stylus/main.scss
index 712ba6280..945439836 100644
--- a/nezha-fronted/src/assets/stylus/main.scss
+++ b/nezha-fronted/src/assets/stylus/main.scss
@@ -1174,3 +1174,30 @@ li{
.el-button--primary:hover{
background-color: rgba(255, 99, 71, .85);
}
+
+/*滚动条相关,减小table内滚动条的空间*/
+.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
+ width: 6px;
+}
+.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
+ height: 6px;
+}
+.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
+ background-color: transparent;
+}
+.ps__rail-y {
+ width: 6px;
+}
+.ps__rail-x {
+ height: 6px;
+}
+.el-table__fixed-right {
+ right: 10px !important;
+}
+.el-table__fixed-right-patch {
+ width: 10px !important;
+ background-color: #fcfcfc;
+}
+.el-table__fixed-body-wrapper {
+ height: calc(100% - 42px) !important;
+}
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index 90dfed7a7..eb5caa2b0 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -33,6 +33,7 @@
class="nz-table"
:data="tableData"
border
+ ref="alertRuleTable"
tooltip-effect="light"
height="calc(100% - 125px)"
v-scrollBar:el-table
@@ -84,6 +85,7 @@
+
@@ -105,6 +107,7 @@
name: "alert-config",
data() {
return {
+ showTopBtn: false,
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [{
@@ -405,6 +408,19 @@
},
mounted() {
this.getTableData();
+ this.$nextTick(() => {
+ //绑定滚动条事件,控制top按钮
+ let el = this.$refs.alertRuleTable.$el.querySelector(".el-table__body-wrapper");
+ if (el._ps_) {
+ el.addEventListener("ps-scroll-y", () => {
+ if (el._ps_.scrollbarYTop > 100) {
+ this.showTopBtn = true;
+ } else {
+ this.showTopBtn = false;
+ }
+ });
+ }
+ });
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index cce22ac07..2230bd973 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -25,6 +25,7 @@
class="nz-table"
:data="tableData"
border
+ ref="alertListTable"
tooltip-effect="light"
height="calc(100% - 125px)"
v-scrollBar:el-table
@@ -91,6 +92,7 @@
+
@@ -112,6 +114,7 @@
name: "alertList",
data() {
return {
+ showTopBtn: false,
pageObj: {
pageNo: 1,
pageSize: 20,
@@ -353,6 +356,19 @@
},
mounted() {
this.getAlertList();
+ this.$nextTick(() => {
+ //绑定滚动条事件,控制top按钮
+ let el = this.$refs.alertListTable.$el.querySelector(".el-table__body-wrapper");
+ if (el._ps_) {
+ el.addEventListener("ps-scroll-y", () => {
+ if (el._ps_.scrollbarYTop > 100) {
+ this.showTopBtn = true;
+ } else {
+ this.showTopBtn = false;
+ }
+ });
+ }
+ });
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
diff --git a/nezha-fronted/src/components/page/asset/asset.vue b/nezha-fronted/src/components/page/asset/asset.vue
index ecb10a9df..da494a785 100644
--- a/nezha-fronted/src/components/page/asset/asset.vue
+++ b/nezha-fronted/src/components/page/asset/asset.vue
@@ -56,6 +56,7 @@
v-scrollBar:el-table
border
tooltip-effect="light"
+ ref="assetTable"
>
-
+
@@ -214,6 +217,7 @@
+