后端传来一个data数据,展示一个前端表格,前端用 ElementUI加js部分
时间: 2024-02-09 19:11:53 浏览: 64
以下是基于 ElementUI 表格组件和 JavaScript 的代码示例,用于展示后端传来的 `data` 数据:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted() {
this.fetchData()
},
methods: {
fetchData() {
// 向后端请求数据
axios.get('/api/data').then(res => {
this.tableData = res.data
})
}
}
}
</script>
```
在上面的代码中,我们使用了 `el-table` 组件来展示表格数据,其中 `:data="tableData"` 表示表格的数据来源是 `tableData` 数组。在 `mounted` 钩子函数中,我们调用 `fetchData` 方法来向后端请求数据,然后将返回的数据赋值给 `tableData` 数组。在 `fetchData` 方法中,我们使用了 axios 库来发起 HTTP 请求。你需要根据实际情况,修改请求的 URL 和请求方法(例如 GET、POST 等)。另外,你还需要按照实际情况,修改表格的列定义和数据属性名。
阅读全文