目前需求。不会vue3。setup的那种。我现在想写一个数据表格。后端的接口穿的是list。数据表格用elemnet plus接受数据的情况下。axios的代码怎么写
<template>
<div>
<el-table :data="tableData.list">
<el-table-column label="ID" property="id"></el-table-column>
<el-table-column label="Name" property="name"></el-table-column>
<el-table-column label="Email" property="email"></el-table-column>
</el-table>
</div>
</template>
......
setup() {
const tableData = reactive({
list:[]
});
axios.get('your-backend-api-url')
.then(response => {
tableData.list = response.data;
})
.catch(error => {
console.log(error);
});
return {
tableData
}
}
小魔女参考了bing和GPT部分内容调写:
// 定义axios实例
const axiosInstance = axios.create({
baseURL: 'https://api.example.com', // 根据实际情况修改
timeout: 5000
})
// 定义数据表格所需字段
const columns = [{
title: '姓名',
key: 'name'
},
{
title: '年龄',
key: 'age'
},
{
title: '住址',
key: 'address'
}
]
// 获取数据表格数据
axiosInstance.get('/userList').then(res => {
const data = res.data; // 获取后端返回的数据，一般是一个list，具体根据实际情况修改
// 初始化element ui的数据表格，需要传入columns和data两个参数，columns是定义好的字段，data是获取到的数据，具体使用可以参考文档说明。
this.tableData = {columns, data}
})
回答不易，记得采纳呀。