feat: 滚动条统一
This commit is contained in:
@@ -60,13 +60,15 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="line-100"></div>
|
<div class="line-100"></div>
|
||||||
<div class="endpoint-sub-table-body">
|
<div class="endpoint-sub-table-body">
|
||||||
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
|
<el-scrollbar style="height: 100%" ref="assetScrollbar">
|
||||||
<div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
|
<div @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
|
||||||
<div class="endpoint-sub-table-col">{{item.host}}</div>
|
<div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
|
||||||
<el-popover trigger="hover" placement="right-start" :content="item.sn" >
|
<div class="endpoint-sub-table-col">{{item.host}}</div>
|
||||||
<div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
|
<el-popover trigger="hover" placement="right-start" :content="item.sn" >
|
||||||
</el-popover>
|
<div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
|
||||||
</div>
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!--end--table-->
|
<!--end--table-->
|
||||||
@@ -96,6 +98,7 @@
|
|||||||
:data="endpointList"
|
:data="endpointList"
|
||||||
ref="endpointTable"
|
ref="endpointTable"
|
||||||
style="width: 100%;border-radius: 4px;"
|
style="width: 100%;border-radius: 4px;"
|
||||||
|
v-scrollBar:el-table
|
||||||
height="calc(100% - 36px)"
|
height="calc(100% - 36px)"
|
||||||
:row-class-name="setRowIndex"
|
:row-class-name="setRowIndex"
|
||||||
empty-text=" ">
|
empty-text=" ">
|
||||||
@@ -393,6 +396,7 @@
|
|||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
this.$refs.assetScrollbar.update();
|
||||||
},
|
},
|
||||||
|
|
||||||
/*获取project列表*/
|
/*获取project列表*/
|
||||||
@@ -483,6 +487,7 @@
|
|||||||
this.endpointTouch = true;
|
this.endpointTouch = true;
|
||||||
this.endpointForm.projectId = this.currentProject.id;
|
this.endpointForm.projectId = this.currentProject.id;
|
||||||
this.endpointForm.moduleId = this.currentModuleCopy.id;
|
this.endpointForm.moduleId = this.currentModuleCopy.id;
|
||||||
|
this.$refs.assetScrollbar.update();
|
||||||
},
|
},
|
||||||
|
|
||||||
//将param转为json字符串格式
|
//将param转为json字符串格式
|
||||||
|
|||||||
@@ -53,6 +53,7 @@
|
|||||||
height="calc(100% - 160px)"
|
height="calc(100% - 160px)"
|
||||||
style="width: 100%;"
|
style="width: 100%;"
|
||||||
:data="tableData"
|
:data="tableData"
|
||||||
|
v-scrollBar:el-table
|
||||||
border
|
border
|
||||||
tooltip-effect="light"
|
tooltip-effect="light"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -368,10 +368,12 @@
|
|||||||
|
|
||||||
/*关闭弹框*/
|
/*关闭弹框*/
|
||||||
esc() {
|
esc() {
|
||||||
this.rightBox.show = false;
|
if (this.rightBox.show) {
|
||||||
//this.editParamBox.show = false;
|
this.rightBox.show = false;
|
||||||
this.$refs.chartForm.resetFields();//清空表单
|
//this.editParamBox.show = false;
|
||||||
this.chart.id='';//不清除,再次打开创建图表,会显示删除按钮
|
this.$refs.chartForm.resetFields();//清空表单
|
||||||
|
this.chart.id='';//不清除,再次打开创建图表,会显示删除按钮
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
/*metric部分相关方法--begin*/
|
/*metric部分相关方法--begin*/
|
||||||
|
|||||||
@@ -167,7 +167,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!--endpoint query-->
|
<!--endpoint query-->
|
||||||
<div class="content-right" v-show="tableShow == 3" style="position: relative">
|
<div class="content-right" v-if="tableShow == 3" style="position: relative">
|
||||||
<div class="top-tools" >
|
<div class="top-tools" >
|
||||||
<div>
|
<div>
|
||||||
<div @click="backToEdpTab">
|
<div @click="backToEdpTab">
|
||||||
|
|||||||
@@ -80,6 +80,7 @@ const el_scrollBar = el => {
|
|||||||
};
|
};
|
||||||
Vue.directive("scrollBar", {
|
Vue.directive("scrollBar", {
|
||||||
inserted(el, binding, vnode) {
|
inserted(el, binding, vnode) {
|
||||||
|
console.info(1)
|
||||||
const { arg } = binding;
|
const { arg } = binding;
|
||||||
if (arg === "el-table") {
|
if (arg === "el-table") {
|
||||||
el = el.querySelector(".el-table__body-wrapper");
|
el = el.querySelector(".el-table__body-wrapper");
|
||||||
@@ -95,8 +96,6 @@ Vue.directive("scrollBar", {
|
|||||||
el.classList.add("ps")
|
el.classList.add("ps")
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
} else if (arg === 'metric-set') {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
const rules = ["fixed", "absolute", "relative"];
|
const rules = ["fixed", "absolute", "relative"];
|
||||||
if (!rules.includes(window.getComputedStyle(el, null).position)) {
|
if (!rules.includes(window.getComputedStyle(el, null).position)) {
|
||||||
@@ -110,9 +109,11 @@ Vue.directive("scrollBar", {
|
|||||||
el_scrollBar(el);
|
el_scrollBar(el);
|
||||||
},
|
},
|
||||||
componentUpdated(el, binding, vnode, oldVnode) {
|
componentUpdated(el, binding, vnode, oldVnode) {
|
||||||
|
console.info(2)
|
||||||
const { arg } = binding;
|
const { arg } = binding;
|
||||||
if (arg === "el-table") {
|
if (arg === "el-table") {
|
||||||
el = el.querySelector(".el-table__body-wrapper");
|
el = el.querySelector(".el-table__body-wrapper");
|
||||||
|
el.classList.add("ps");
|
||||||
!el && console.warn("未发现className为el-table__body-wrapper的dom");
|
!el && console.warn("未发现className为el-table__body-wrapper的dom");
|
||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
|
|||||||
Reference in New Issue
Block a user