用vue3请求后端数据并表现在element plus的表格上
时间: 2024-03-09 13:50:18 浏览: 14
好的,首先你需要在vue3项目中安装axios和element-plus。可以使用以下命令进行安装:
```
npm install axios
npm install element-plus
```
然后在你的Vue组件中引入需要的库:
```js
import axios from 'axios'
import { ElTable, ElTableColumn } from 'element-plus';
```
接下来你可以在`data`中定义表格数据和列属性:
```js
export default {
data() {
return {
tableData: [],
columns: [
{ prop: 'name', label: '姓名' },
{ prop: 'age', label: '年龄' },
{ prop: 'address', label: '地址' }
]
}
}
}
```
然后在`mounted`生命周期函数中使用axios请求后端数据,并将返回的数据存储在`tableData`中:
```js
export default {
mounted() {
axios.get('/api/data').then(res => {
this.tableData = res.data;
}).catch(err => {
console.log(err);
});
}
}
```
最后在模板中使用`ElTable`和`ElTableColumn`来展示表格数据:
```html
<template>
<el-table :data="tableData">
<el-table-column v-for="col in columns" :key="col.prop" :prop="col.prop" :label="col.label">
</el-table-column>
</el-table>
</template>
```
这样就可以在Element Plus的表格上展示从后端请求的数据了。