vue-seamless-scroll使用中,el-table 原始绑定的数据是个空数组,我需要往里面推送数据,当数据超出时,不无缝滚动
时间: 2024-10-19 07:06:23 浏览: 36
Vue Seamless Scroll是一个插件,它用于实现表格的无缝滚动效果,使得用户在滚动时感觉内容几乎是无限的。如果你的`el-table`原始绑定的数据是一个空数组,你可以按照以下步骤操作:
1. 首先,你需要初始化`el-table`时不启用无缝滚动,可以设置`seamless`属性为`false`。例如:
```html
<el-table :data="initialData" seamless="false">
</el-table>
```
这里的`initialData`是一个初始为空的数组。
2. 然后,在适当的时候,比如异步获取数据完成后,将数据赋值给`initialData`,并更新视图:
```javascript
data() {
return {
initialData: [], // 初始为空数组
loadedData: [] // 存储实际加载的数据
};
},
async fetchData() {
const result = await yourDataFetchMethod();
this.initialData = result; // 当数据准备好后替换初始数据
}
```
3. 使用`v-if`或`v-show`来控制表单是否显示滚动条,直到数据填充完成:
```html
<template>
<div v-if="loadedData.length > 0">
<el-table :data="loadedData" seamless></el-table>
</div>
</template>
```
当你添加了新数据后,`el-table`会自动调整高度,但由于设置了`seamless=false`,滚动不会自动发生。如果你想手动触发滚动,可以在数据加载完毕后,调用`this.$refs.table.scrollTo({ top: ... })`,设置新的滚动位置。
阅读全文