<ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" :selection.sync="selection" height="calc(100vh - 515px)" :parseData="parseData">当中解析表格无法解析全部的,只能解决当前页,应该怎么解决
时间: 2023-07-12 19:43:51 浏览: 148
el-data-table:element基于element-ui,轻松实现结界
您可以使用一个自定义函数来解决这个问题。在您的 <ele-pro-table> 标签中,您可以添加一个额外的属性 `:load="loadData"`,然后在您的组件中定义一个名为 `loadData` 的函数来加载所有数据。在这个自定义函数中,您可以使用 axios 或类似的库来获取您的完整数据集。然后,您可以将完整的数据集保存在您的组件中,并在您的 `parseData` 函数中使用它来解析数据。这样,您就可以在您的表格中显示所有数据,而不仅仅是当前页的数据。
以下是一个可能的实现示例:
```
<template>
<ele-pro-table
ref="table"
:where="where"
:datasource="url"
:columns="columns"
:selection.sync="selection"
height="calc(100vh - 515px)"
:parseData="parseData"
:load="loadData"
/>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
allData: [],
where: {},
url: "/api/data",
columns: [...],
selection: []
};
},
methods: {
async loadData() {
try {
const response = await axios.get("/api/all-data");
this.allData = response.data;
} catch (error) {
console.error(error);
}
},
parseData(data) {
return {
...,
data: this.allData
};
}
}
};
</script>
```
在这个示例中,我们使用 `axios` 库来获取完整的数据集。在 `loadData` 函数中,我们将完整的数据集保存在组件中的 `allData` 数据属性中。然后,在 `parseData` 函数中,我们将 `data` 属性设置为 `this.allData`,这样就可以在表格中显示所有数据了。请注意,这只是一个示例,您需要根据您的具体情况进行修改。
阅读全文