<ElTable :data="data.data" style="width: 100%" size="default" max-height="400" :highlight-current-row="true" empty-text="No Data" :stripe="true" tooltip-effect="light"> <ElTableColumn prop="name" label="名字" /> <ElTableColumn prop="birth" label="上传时间" /> <ElTableColumn prop="act" label="操作" :width="160">如何在这里面用axios导入后端数据
时间: 2023-07-26 13:04:29 浏览: 146
要使用 axios 导入后端数据,你需要在前端代码中添加 axios 的相关代码,并在适当的位置调用后端接口来获取数据。下面是一个示例,展示了如何在 `<ElTable>` 组件中使用 axios 导入后端数据:
```vue
<template>
<div>
<ElTable :data="data" style="width: 100%" size="default" max-height="400" :highlight-current-row="true"
empty-text="No Data" :stripe="true" tooltip-effect="light">
<ElTableColumn prop="name" label="名字" />
<ElTableColumn prop="birth" label="上传时间" />
<ElTableColumn prop="act" label="操作" :width="160">
<!-- 在此处自定义操作列的内容 -->
</ElTableColumn>
</ElTable>
</div>
</template>
<script>
import axios from 'axios';
import { onMounted, reactive } from 'vue';
export default {
data() {
return {
data: [],
};
},
mounted() {
this.getData();
},
methods: {
async getData() {
try {
const response = await axios.get('your-backend-api-url');
this.data = response.data;
} catch (error) {
console.error(error);
}
},
},
};
</script>
```
在上面的代码中,我们首先导入了 axios 库,并在 `getData()` 方法中使用 axios 发起 GET 请求来获取后端数据。请将 `'your-backend-api-url'` 替换为你实际的后端接口 URL。获取到数据后,将其赋值给 `data` 变量,然后在 `<ElTable>` 组件的 `:data` 属性中使用 `data` 变量来展示数据。
这样,当页面加载完成时,`mounted` 生命周期钩子将会触发 `getData()` 方法,从后端获取数据并更新到 `data` 变量中。然后,`<ElTable>` 组件会根据 `data` 变量的值来展示后端数据。
阅读全文