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 @@ +