vue el-row固定显示在tab页顶部
时间: 2023-02-07 13:28:28 浏览: 113
你可以使用 vue 的 ref 属性来获取 el-row 组件的 DOM 元素,然后使用 window.addEventListener('scroll', this.handleScroll) 监听滚动事件,在 handleScroll 方法中控制 el-row 的 fixed 属性。
你需要在 data 中定义一个变量来记录 el-row 是否应该固定,然后在 handleScroll 中根据页面的滚动位置来更新这个变量的值。
例如:
```
<template>
<el-row ref="row" :fixed="isFixed">
<!-- row content -->
</el-row>
</template>
<script>
export default {
data() {
return {
isFixed: false
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll)
},
methods: {
handleScroll() {
const rowTop = this.$refs.row.offsetTop
if (window.scrollY >= rowTop) {
this.isFixed = true
} else {
this.isFixed = false
}
}
}
}
</script>
```
希望这对你有帮助。
阅读全文