el-table获取懒加载数据
时间: 2024-01-27 11:15:03 浏览: 84
el-select数据过多懒加载的解决(loadmore)
以下是使用Element-ui的el-table获取懒加载数据的示例:
1. 在父组件中引入子组件表格,并向子组件传递表格数据和表头数据。
```html
<template>
<div>
<child-table :tableData="tableData" :tableColumns="tableColumns"></child-table>
</div>
</template>
<script>
import ChildTable from './ChildTable.vue';
export default {
components: {
ChildTable
},
data() {
return {
tableData: [], // 表格数据
tableColumns: [] // 表头数据
};
},
mounted() {
// 获取表格数据和表头数据的方法
this.getTableData();
},
methods: {
getTableData() {
// 发送请求获取表格数据和表头数据
// 将获取到的数据赋值给tableData和tableColumns
}
}
};
</script>
```
2. 在子组件中使用el-table渲染表格数据和表头数据。
```html
<template>
<div>
<el-table :data="tableData" :columns="tableColumns"></el-table>
</div>
</template>
<script>
export default {
props: {
tableData: {
type: Array,
default: () => []
},
tableColumns: {
type: Array,
default: () => []
}
}
};
</script>
```
通过以上示例,你可以在父组件中发送请求获取表格数据和表头数据,并将其传递给子组件,子组件使用el-table渲染数据。这样就实现了el-table的懒加载数据。
阅读全文