elementui表格获取数据库数据
时间: 2023-12-22 20:03:16 浏览: 75
数据库表格
如果你使用 ElementUI 的表格组件来展示数据库中的数据,可以按照以下步骤进行操作:
1. 安装 ElementUI 和 axios:
```
npm install element-ui axios --save
```
2. 在需要使用表格的组件中,导入 ElementUI 和 axios:
```javascript
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios';
```
3. 在 data 中定义表格的数据源和表格列的配置:
```javascript
data() {
return {
tableData: [],
columns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'age',
label: '年龄'
}
]
}
}
```
4. 在 created 中使用 axios 获取数据,并将数据赋值给表格的数据源:
```javascript
created() {
axios.get('/api/data').then(response => {
this.tableData = response.data;
}).catch(error => {
console.log(error);
});
}
```
5. 在模板中使用 `<el-table>` 标签来展示表格:
```html
<template>
<div>
<el-table :data="tableData" :columns="columns"></el-table>
</div>
</template>
```
其中,`:data="tableData"` 表示将 `tableData` 数据源绑定到表格的 `data` 属性上,`:columns="columns"` 表示将 `columns` 表格列的配置绑定到表格的 `columns` 属性上。
请注意,以上代码仅供参考,具体实现方式可能因项目而异。
阅读全文