这个list是用ajax从后台传过来的,如何赋值给tableData
时间: 2024-02-16 12:03:55 浏览: 28
如果这个list是从后台通过Ajax请求获取到的,那么您可以在Vue的`mounted`钩子函数中发起Ajax请求,并将获取到的数据赋值给`tableData`。下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="a" label="A"></el-table-column>
<el-table-column prop="b" label="B"></el-table-column>
<el-table-column prop="c" label="C"></el-table-column>
<el-table-column prop="d" label="D"></el-table-column>
<el-table-column prop="e" label="E"></el-table-column>
<el-table-column prop="f" label="F"></el-table-column>
<el-table-column prop="g" label="G"></el-table-column>
<el-table-column prop="h" label="H"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: []
}
},
mounted() {
this.fetchData()
},
methods: {
fetchData() {
// 发起Ajax请求获取数据
axios.get('/api/data')
.then(response => {
this.tableData = response.data
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
```
在这个示例代码中,我们在`mounted`钩子函数中调用了`fetchData`方法,该方法发起了一个Ajax请求,将获取到的数据赋值给`tableData`。在`el-table`组件中使用`:data`属性将`tableData`绑定到表格上,这样获取到的数据就会在表格上展示出来。请注意,这里的Ajax请求使用了axios库,您需要先安装axios并在代码中引入它。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)