vue中多路由表头吸顶实现的几种布局方式

techo:{
 partsFixed:false,
 repairFixed:false，
 mateFixed:false,
 outRepairFixed:false
 }//吸顶状态

export const setTecho=function ({commit},data) {
 commit(types.UPDATETECHO, {data})
}

[types.UPDATETECHO](state,{data}){
 const {name,type,other} =data;
 for (let i in state.techo) {
  if(i===name){
  state.techo[i]=other;
  state.techo[name]=type;
  }
 }
 }//更新吸顶状态

partScroll(){
 const evalPart = this.$refs.evalPart,//evalPart为表格对象
   evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle为导航栏
 if(evalPart){
  let evalPartBottom = evalPart.getBoundingClientRect().bottom,
   evalPartTop = evalPart.getBoundingClientRect().top,
   evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height;
  evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight"partsFixed",type:true,other:false})
  :this.$store.dispatch('setTecho',{name:"partsFixed",type:false,other:false});
 }
 },

scrollEvent(evalPart,evalTopTitle,name){
 if(evalPart){//注意一定要对表格对象进行判断，因为表格是动态添加的，可能值为空，会报错。
  let evalPartBottom = evalPart.getBoundingClientRect().bottom,
  evalPartTop = evalPart.getBoundingClientRect().top,
  evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height;
  evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight"htmlcode">

mounted(){
 window.addEventListener('scroll',this.partScroll);
}




3、最后记得在destroyed里面进行销毁。


destroyed () {
 window.removeEventListener('scroll', this.partScroll)
}




总结
以上所述是小编给大家介绍的vue中多路由表头吸顶实现的几种布局方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！