vue中element table实现横向滚动条一直显示,鼠标不移入表格也显示
时间: 2024-03-16 13:42:46 浏览: 203
解决layui数据表格table的横向滚动条显示问题
5星 · 资源好评率100%
可以通过设置表格的 `max-height` 和 `overflow-y` 属性来实现横向滚动条一直显示。同时,可以使用 `ref` 属性绑定表格元素,在页面加载完成后执行一段 JavaScript 代码,将表格元素的 `overflow-y` 属性值设置为 `auto`,这样就可以实现鼠标不移入表格也显示横向滚动条的效果。
具体实现代码如下:
```html
<template>
<div>
<el-table ref="table" :data="tableData" style="max-height: 300px; overflow-y: scroll;">
<!-- 表格列定义 -->
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted() {
this.$nextTick(() => {
this.$refs.table.$el.querySelector('.el-table__body-wrapper').style.overflowY = 'auto'
})
}
}
</script>
```
在上面的代码中,我们使用了 `mounted` 钩子函数,在页面加载完成后执行了一段 JavaScript 代码,将表格元素的 `overflow-y` 属性值设置为 `auto`,这样就可以实现鼠标不移入表格也显示横向滚动条的效果。同时,我们也设置了表格的 `max-height` 和 `overflow-y` 属性,以控制表格的高度和纵向滚动条的显示。
阅读全文