企业官网建设流程全解析

鹰潭建设网站公司,网店建设管理系统,那里做直播网站,网站备案需要什么文章目录概要实现思路具体代码自适应封装mixins代码使用示例组件代码附加分享概要 在后台管理系统开发过程中#xff0c;通常我们的布局都是如下图。这里面比较头疼的问题就是右侧这个table的高度自适应问题#xff0c;接下来我将分享如何简单实现表格高度自适应。 实现思…文章目录概要实现思路具体代码自适应封装mixins代码使用示例组件代码附加分享概要在后台管理系统开发过程中通常我们的布局都是如下图。这里面比较头疼的问题就是右侧这个table的高度自适应问题接下来我将分享如何简单实现表格高度自适应。实现思路1、表格高度视口高度-头部搜索表单的高度-其他margin/padding2、为了不每个组件都写那些计算的代码提取一个mixins要实现自适应引用下就行具体代码自适应封装mixins代码首先那个toggleExpand方法不看。1、组件第一次渲染算一次第一次就不用防抖了2、然后就是注册resize事件窗口尺寸变化再触发计算这里要防抖啊3、里面查询表单的高度要动态获取原因就是不同窗口尺寸表单项会出现换行的情况。exportdefault{data(){return{fixedHeight:120,tableHeight:undefined,resizeTimer:null,isExpanded:false}},mounted(){this.updateHeight()window.addEventListener(resize,this.resizeHandler)},beforeDestroy(){window.removeEventListener(resize,this.resizeHandler)},methods:{resizeHandler(){this.resizeTimerclearTimeout(this.resizeTimer)this.resizeTimersetTimeout((){this.updateHeight()},300)},updateHeight(){constformEldocument.querySelector(.header-form)constformHeightformEl?formEl.offsetHeight:60this.tableHeightwindow.innerHeight-this.fixedHeight-formHeight-20},toggleExpand(){this.isExpanded!this.isExpandedthis.$nextTick((){this.updateHeight()})}}}使用示例组件代码1、这里代码不兴放一半所以App代码也放在下面了2、使用步骤1、导入注册mixins2、然后table height绑定tableHeight这样就OK了App组件代码templatediv idappdivclassheader-container/divdivclassbottom-containerdivclassbottom-left-container/divdivclassbottom-right-containerUser//div/div/div/templatescriptimportUserfrom/views/User.vueexportdefault{components:{User}}/scriptstyle langless#app{position:fixed;top:0;left:0;height:100%;width:100%;display:flex;flex-direction:column;.header-container{height:80px;background-color:#34495d;}.bottom-container{height:0;flex:1;display:flex;.bottom-left-container{width:200px;height:100%;background-color:#43bd87;}.bottom-right-container{height:100%;width:0;flex:1;overflow:auto;}}}/styleUser组件代码templatedivclassuser-containerel-form label-positionleftlabel-width50px:modelformDtasclassheader-formel-row:gutter20el-col:xs24:sm12:md8:lg6el-form-item label姓名el-input v-modelformDtas.Name/el-input/el-form-item/el-colel-col:xs24:sm12:md8:lg6el-form-item label年龄el-input v-modelformDtas.Age/el-input/el-form-item/el-colel-col:xs24:sm12:md8:lg6el-form-item label姓名el-input v-modelformDtas.Name/el-input/el-form-item/el-colel-col:xs24:sm12:md8:lg6el-form-item label年龄v-ifisExpandedel-input v-modelformDtas.Age/el-input/el-form-itemdiv v-elseel-button typeprimary查询/el-buttonel-button typetextclicktoggleExpandclassexpand-btn{{isExpanded?收起:展开}}i:class[el-icon-arrow- (isExpanded ? up : down)]/i/el-button/div/el-col/el-rowdiv v-ifisExpandedel-row:gutter20el-col:xs24:sm12:md8:lg6el-form-item label姓名el-input v-modelformDtas.Name/el-input/el-form-item/el-colel-col:xs24:sm12:md8:lg6el-form-item label年龄el-input v-modelformDtas.Age/el-input/el-form-item/el-colel-col:xs24:sm12:md8:lg6divel-button typeprimary查询/el-buttonel-button typetextclicktoggleExpandclassexpand-btn{{isExpanded?收起:展开}}i:class[el-icon-arrow- (isExpanded ? up : down)]/i/el-button/div/el-col/el-row/div/el-formel-table:datatableDatasstylewidth: 100%border:heighttableHeightel-table-column propNamelabel姓名/el-table-columnel-table-column propAgelabel年龄/el-table-columnel-table-column propGenderlabel性别/el-table-column/el-table/div/templatescriptimporttableAutoHeightfrom/mixins/tableAutoHeight.jsexportdefault{mixins:[tableAutoHeight],data(){return{formDtas:{Name:,Age:},tableDatas:[{Name:张三,Age:20,Gender:男},{Name:王五,Age:30,Gender:男},{Name:李四,Age:25,Gender:女},{Name:老王,Age:25,Gender:女},{Name:张三,Age:20,Gender:男},{Name:王五,Age:30,Gender:男},{Name:李四,Age:25,Gender:女},{Name:老王,Age:25,Gender:女},{Name:张三,Age:20,Gender:男},{Name:王五,Age:30,Gender:男},{Name:李四,Age:25,Gender:女},{Name:老王,Age:25,Gender:女},{Name:张三,Age:20,Gender:男},{Name:王五,Age:30,Gender:男},{Name:李四,Age:25,Gender:女},{Name:老王,Age:25,Gender:女},{Name:张三,Age:20,Gender:男},{Name:王五,Age:30,Gender:男},{Name:李四,Age:25,Gender:女},{Name:老王,Age:25,Gender:女}]}},mounted(){},computed:{},methods:{},}/scriptstyle scoped langless.user-container{padding:20px;}/style附加分享实现了表格自适应想处理下头部查询表单项换行的问题。这里就使用格栅布局。思路1、每行显示四列折叠的情况下第一行最后一列就显示那个查询按钮展开情况下第一行最后列就是表单项显示按钮隐藏2、超出四个的表单项都用一个div包起来el-row超出会自动换行的初始隐藏展开就显示3、触发展开/隐藏表格高度要重新算啊。代码都在上面了相信各位大佬肯定是看得懂的。