vxe-table无缝滚动
时间: 2023-10-25 10:11:13 浏览: 131
vxe-table是一个基于Vue.js的表格组件库,它提供了无缝滚动的功能。要实现无缝滚动,需要在vxe-table的配置项中设置scroll-x属性为true,并且设置表格的宽度。
示例代码如下:
```html
<template>
<vxe-table :data="tableData" :columns="columns" :scroll-x="true" style="width: 800px;"></vxe-table>
</template>
<script>
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 20 },
{ id: 2, name: 'Mike', age: 25 },
{ id: 3, name: 'Lucy', age: 18 },
{ id: 4, name: 'Tom', age: 30 },
{ id: 5, name: 'Jerry', age: 22 },
{ id: 6, name: 'Mary', age: 28 },
{ id: 7, name: 'Bob', age: 24 },
{ id: 8, name: 'Alice', age: 19 },
{ id: 9, name: 'Jack', age: 26 },
{ id: 10, name: 'Lily', age: 21 }
],
columns: [
{ field: 'id', title: 'ID' },
{ field: 'name', title: 'Name' },
{ field: 'age', title: 'Age' }
]
}
},
components: {
VxeTable
}
}
</script>
```
阅读全文