专业企业网站设计网络公司,英文网站报价,杭州优化排名哪家好,西安百度框架户目录 1、代码如下#xff1a;
2、代码说明
2.1、对头部和表头标签等悬停在上方在cs中维护#xff1b;
2.2、点击隐藏和收起在mounted中增加点击的监控事件
2.3、针对查询时增加高度的处理#xff1a; 1、代码如下#xff1a;
template div classfra…目录 1、代码如下
2、代码说明
2.1、对头部和表头标签等悬停在上方在cs中维护
2.2、点击隐藏和收起在mounted中增加点击的监控事件
2.3、针对查询时增加高度的处理 1、代码如下
template div classframe-page z-search-panel classfixed-search-panel z-form refmodel :modelformItem :label-width125 label-positionright z-rowz-rowz-col :span8z-form-item label主题z-input v-modelformItem.Object placeholder请输入参考主题 clearable/z-input/z-form-item/z-col/z-rowz-spread :no-suspendtrue div slotilead-more-content z-button clickdoQuery iconios-search typeprimary查询/z-buttonz-button clickresetSearch iconandroid-refresh stylemargin-left:10px重置/z-button/divz-rowz-col span8z-form-item labelbigObectz-input v-modelformItem.bigObect placeholder请输入父主题 clearable/z-input/z-form-item/z-col/z-row/z-spread/z-row/z-form/z-search-panelz-list-panel classm-t-10 p-t-10 p-l-10 p-r-10 :style{height: (this.windowHeight * 0.725) px}vxe-toolbar stylewidth: 100% classfixed-toolbartemplate v-slot:buttonsdiv stylewidth: 100%;z-rowz-button typeprimary :loadingloading.list clickfunctionHistory() 查看历史/z-button/z-row/div/template/vxe-toolbarvxe-table refchildTableclass mian-tablehighlight-hover-rowshow-overflow borderheightautorow-idid aligncenter sizemedium:datatableData:loadingloading.listcheckbox-changeselectChangeEventcheckbox-allselectAllEvent:checkbox-configchildTableCheckboxConfigvxe-table-column typecheckbox aligncenter min-width40/vxe-table-column !-- fixedleft--vxe-table-column resizable fieldObject title主题 aligncenter min-width120 /vxe-table-columnvxe-table-column resizable fieldbigObject title父主题 aligncenter min-width140 /vxe-table-columnvxe-table-column resizable fixedright aligncenter min-width120 title操作 template v-slot{ row, seq }a classlink clickedit(row, seq)维护/adiv classdivider/diva classlink clickdelete(row, seq)删除/a/template/vxe-table-column/vxe-tablevxe-pagersizesmall:loadingloading.list:current-pagetablePage.page:page-sizetablePage.rows:totaltablePage.records:layouts[PrevPage,JumpNumber,NextPage,FullJump,Sizes,Total]page-changehandlePageChange/vxe-pager/z-list-panel/div
/template
script
import /**/**/vxe-table
export default {name: name,data () {return {windowHeight: 0,formItem: {Object: , // 主题bigObject: },tableData: [],selectData: [],tablePage: {page: 1,rows: 10,records: 0},loading: {list: false}}},mounted () {this.$nextTick().then(() {const firstNode document.querySelector(.zvu-btn.zvu-btn-text.zvu-btn.zvu-btn-default.zvu-more-showBtn)console.log(firstNode, firstNode)firstNode.addEventListener(click, this.onClickFirstNode)})this.updateWindowHeight()},beforeDestroy () {window.removeEventListener(resize, this.updateWindowHeight)},methods: {updateWindowHeight () {console.log(updateWindowHeight, window.innerHeight)this.windowHeight window.innerHeightconsole.log(this.windowHeight, this.windowHeight)},onClickFirstNode () {console.log(onClickFirstNode)let firstNodeSpan document.querySelector(.zvu-btn.zvu-btn-text.zvu-btn.zvu-btn-default.zvu-more-showBtn span).innerHTMLlet tableHeader document.querySelector(.mian-table .vxe-table--header-wrapper.body--wrapper)let fixedToolbar document.querySelector(.fixed-toolbar)if (firstNodeSpan.includes(展开)) {// 收起了 245 295fixedToolbar.style.top 255pxtableHeader.style.top 290px}if (firstNodeSpan.includes(收起)) {// 展开了console.log(firstNodeSpan2, firstNodeSpan)fixedToolbar.style.top 505pxtableHeader.style.top 535px}},doQuery (type) {let that thisif (type ! page) {that.tablePage.page 1}let params Object.assign({}, that.formItem, that.tablePage)that.tableData []that.selectData []that.loading.list trueconst zlistpaneldivheight document.querySelector(.z-list-panel.m-t-10.p-t-10.p-l-10.p-r-10 div:first-child)api.queryData(params).then((response) {that.tablePage.records response.data.recordsthat.tableData response.data.rowszlistpaneldivheight.style.height ((that.windowHeight) * 0.61) pxthat.loading.list false}).catch((error) {zlistpaneldivheight.style.height ((that.windowHeight) * 0.61) pxthat.loading.list falseconsole.log(error)that.$Message.warning(查询异常)})},resetSearch () {let that thisthat.formItem {Object: , bigObject: }that.doQuery()},handlePageChange ({ currentPage, pageSize }) {let that thisthat.tablePage.page currentPagethat.tablePage.rows pageSizethat.doQuery(page)},// 刷新refreshTable () {let that thislet table that.$refs[childTable]table.syncData()that.doQuery()}}
}
/script
style
.fixed-search-panel {position: sticky; /* 使用sticky定位使工具栏悬停 */top: 120px; /* 从125px开始 */z-index: 100; /* 确保工具栏在最上方 *//*background-color: #fff; 设置背景色 */
}
.fixed-toolbar.vxe-toolbar{ /* .mian-table .z-list-panel */position: sticky; /* 使用sticky定位使工具栏悬停 */top: 255px; /* 从245px开始 */z-index: 100; /* 确保工具栏在最上方 */display: inline;line-height: 50px;
}
.fixed-toolbar.vxe-toolbar .vxe-button--wrapper div,
.fixed-toolbar.vxe-toolbar .vxe-button--wrapper {width: 100%;background-color: #ffffff; /* 设置背景色 */
}
.mian-table .vxe-body--x-space {position: sticky; /* 使用sticky定位使工具栏悬停 */top: 289px; /* 从289px开始 */z-index: 100; /* 确保工具栏在最上方 */
}
.mian-table .vxe-table--header-wrapper.body--wrapper,
.mian-table .vxe-header--row {position: sticky; /* 使用sticky定位使工具栏悬停 */top: 290px; /* 从290px开始 */z-index: 100; /* 确保工具栏在最上方 *//*background-color: #fff; 设置背景色 */
}
/style
style scoped
.report-rule-date .zvu-form-item-label:before {content: *;display: inline-block;margin-right: 4px;line-height: 1;font-family: SimSun;font-size: 14px;color: #ed4014;
}
.toolbarselect.zvu-select{width: 150px !important;
}
/style2、代码说明
2.1、对头部和表头标签等悬停在上方在cs中维护
style
.fixed-search-panel {position: sticky; /* 使用sticky定位使工具栏悬停 */top: 120px; /* 从125px开始 */z-index: 100; /* 确保工具栏在最上方 *//*background-color: #fff; 设置背景色 */
}
.fixed-toolbar.vxe-toolbar{ /* .mian-table .z-list-panel */position: sticky; /* 使用sticky定位使工具栏悬停 */top: 255px; /* 从245px开始 */z-index: 100; /* 确保工具栏在最上方 */display: inline;line-height: 50px;
}
.fixed-toolbar.vxe-toolbar .vxe-button--wrapper div,
.fixed-toolbar.vxe-toolbar .vxe-button--wrapper {width: 100%;background-color: #ffffff; /* 设置背景色 */
}
.mian-table .vxe-body--x-space {position: sticky; /* 使用sticky定位使工具栏悬停 */top: 289px; /* 从289px开始 */z-index: 100; /* 确保工具栏在最上方 */
}
.mian-table .vxe-table--header-wrapper.body--wrapper,
.mian-table .vxe-header--row {position: sticky; /* 使用sticky定位使工具栏悬停 */top: 290px; /* 从290px开始 */z-index: 100; /* 确保工具栏在最上方 *//*background-color: #fff; 设置背景色 */
}
/style
2.2、点击隐藏和收起在mounted中增加点击的监控事件 mounted () {this.$nextTick().then(() {const firstNode document.querySelector(.zvu-btn.zvu-btn-text.zvu-btn.zvu-btn-default.zvu-more-showBtn)console.log(firstNode, firstNode)firstNode.addEventListener(click, this.onClickFirstNode)})
},
methods: {onClickFirstNode () {console.log(onClickFirstNode)let firstNodeSpan document.querySelector(.zvu-btn.zvu-btn-text.zvu-btn.zvu-btn-default.zvu-more-showBtn span).innerHTMLlet tableHeader document.querySelector(.mian-table .vxe-table--header-wrapper.body--wrapper)let fixedToolbar document.querySelector(.fixed-toolbar)if (firstNodeSpan.includes(展开)) {// 收起了 245 295fixedToolbar.style.top (this.windowHeight * 0.26) pxtableHeader.style.top (this.windowHeight * 0.31) px}if (firstNodeSpan.includes(收起)) {// 展开了console.log(firstNodeSpan2, firstNodeSpan)fixedToolbar.style.top (this.windowHeight * 0.55) pxtableHeader.style.top (this.windowHeight * 0.58) px}}
},
2.3、针对查询时增加高度的处理
首先table 增加强制样式
z-list-panel classm-t-10 p-t-10 p-l-10 p-r-10 :style{height: (this.windowHeight * 0.725) px}
/z-list-paneldata(){return {windowHeight: 0}
}mounted () {this.updateWindowHeight() //获取页面高信息},
beforeDestroy () {window.removeEventListener(resize, this.updateWindowHeight)},
methods: {updateWindowHeight () {console.log(updateWindowHeight, window.innerHeight)this.windowHeight window.innerHeight //采用百分比},//查询doQuery (type) {let that thisthat.tableData []that.selectData []that.loading.list trueconst zlistpaneldivheight document.querySelector(.z-list-panel.m-t-10.p-t-10.p-l-10.p-r-10 div:first-child)api.doQuery (params).then((response) {that.tablePage.records response.data.recordsthat.tableData response.data.rowszlistpaneldivheight.style.height ((that.windowHeight) * 0.61) pxthat.loading.list false}).catch((error) {zlistpaneldivheight.style.height ((that.windowHeight) * 0.61) pxthat.loading.list falseconsole.log(error)that.$Message.warning(查询异常)})
}
