vxe-grid 放在fieldset标签中,没有横向滚动条,且表头不跟着滚动
时间: 2023-05-26 22:02:12 浏览: 154
如果在fieldset标签中使用vxe-grid,可能无法正确显示横向滚动条和表头。这可能是由于fieldset标签导致的样式问题。
解决这个问题的方法是在fieldset标签之外添加一个div,将vxe-grid放在这个div中。为了实现表头随着横向滚动滚动的效果,还需要在这个div中添加一个表头容器,并将表头容器与vxe-grid进行绑定。下面是一个例子:
```html
<fieldset>
<legend>My Grid</legend>
<div style="overflow-x: auto;">
<div ref="tableHeader" class="vxe-table--header-wrapper"></div>
<vxe-grid ref="grid" :columns="columns" :data="data"></vxe-grid>
</div>
</fieldset>
```
在这个例子中,表格被包含在一个带有横向滚动条的div中。前面已经提到了,为了实现表头随着横向滚动滚动的效果,我们还需要在这个div中添加一个表头容器,并将表头容器与vxe-grid进行绑定。
```javascript
mounted () {
// 绑定表头容器
this.$refs.grid.$xegrid.connect({
header: this.$refs.tableHeader
})
}
```
在组件的mounted钩子函数中,通过this.$refs.grid.$xegrid.connect方法来将表头容器与vxe-grid进行绑定。这样,当表格滚动时,表头容器也会随着滚动,并保持与表格的对齐。
需要注意的是,为了确保表头容器和表格的样式正确显示,我们还需要在样式中对表头容器进行一些特定的设置,比如将它的position设置为absolute等。
阅读全文