feat: 滚动条统一

This commit is contained in:
陈劲松
2020-03-01 17:59:29 +08:00
parent 7fc768a536
commit 8cefe32dac
5 changed files with 23 additions and 14 deletions

View File

@@ -60,6 +60,7 @@
</div> </div>
<div class="line-100"></div> <div class="line-100"></div>
<div class="endpoint-sub-table-body"> <div class="endpoint-sub-table-body">
<el-scrollbar style="height: 100%" ref="assetScrollbar">
<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 @click="selectAsset(item, index)" :data="item.id" v-for="item,index in assetList" class="endpoint-sub-table-row" :id="'select-asset-'+item.id">
<div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div> <div :id="index" @click.stop v-if="!currentModuleCopy.id" class="endpoint-sub-table-body-dialog"></div>
<div class="endpoint-sub-table-col">{{item.host}}</div> <div class="endpoint-sub-table-col">{{item.host}}</div>
@@ -67,6 +68,7 @@
<div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div> <div slot="reference" class="endpoint-sub-table-col">{{item.sn}}</div>
</el-popover> </el-popover>
</div> </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字符串格式

View File

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

View File

@@ -368,10 +368,12 @@
/*关闭弹框*/ /*关闭弹框*/
esc() { esc() {
if (this.rightBox.show) {
this.rightBox.show = false; this.rightBox.show = false;
//this.editParamBox.show = false; //this.editParamBox.show = false;
this.$refs.chartForm.resetFields();//清空表单 this.$refs.chartForm.resetFields();//清空表单
this.chart.id='';//不清除,再次打开创建图表,会显示删除按钮 this.chart.id='';//不清除,再次打开创建图表,会显示删除按钮
}
}, },
/*metric部分相关方法--begin*/ /*metric部分相关方法--begin*/

View File

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

View File

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