vxe-grid 表格表头不跟着滚动
时间: 2023-05-26 20:02:03 浏览: 349
解决layui表格的表头不滚动的问题
要实现vxe-grid表格表头不跟着滚动,可以按照以下步骤进行操作:
1. 设置固定表头:在vxe-grid组件中添加固定表头属性fixed="top",表示表头会固定在顶部。
2. 设置滚动区域:在vxe-grid组件中添加滚动区域属性max-height或max-width,并设定具体数值,表示该区域可以滚动。
3. 隐藏原表头:在vxe-grid组件中添加隐藏表头属性show-header="false",表示原本的表头会被隐藏。
代码示例:
```html
<template>
<vxe-grid
:data="tableData"
:columns="tableColumns"
:fixed="fixedConfig"
:show-header="showHeader"
:max-height="maxHeight"
></vxe-grid>
</template>
<script>
export default {
data () {
return {
tableData: [...],
tableColumns: [...],
fixedConfig: { header: true },
showHeader: false,
maxHeight: '300px'
}
}
}
</script>
```
通过设置fixedConfig属性,可以实现固定表头、固定列等效果。在这里,只需固定表头即可。
通过设置showHeader属性为false,原表头会被隐藏。同时,通过设置maxHeight属性,可以让整个表格区域出现滚动条,但表头始终固定在顶部。
阅读全文