VUE中使用el-table和el-table-column，如何使用HTTP取得数据后，赋值

源码资源网

VUE中使用el-table和el-table-column，如何使用HTTP取得数据后，赋值
在 Vue.js 中使用 Element UI 的  `el-table`  和  `el-table-column`  组件，以及通过 HTTP 请求获取数据后赋值并进行中文输出，您可以遵循以下步骤：
1. 创建一个 Vue 组件，使用 Element UI 的  `el-table`  和  `el-table-column`  组件来展示数据。
2. 在组件中使用 Axios 或 Fetch API 发起 HTTP 请求来获取数据。
3. 在获取到数据后，将数据赋值给 Vue 实例的数据属性，并在模板中使用中文输出数据。
下面是一个简单的示例代码，演示如何在 Vue.js 中使用 Element UI 的  `el-table`  和  `el-table-column`  组件，通过 HTTP 请求获取数据后进行中文输出：

1. html
   
2. <template>
   
3.   <div>
   
4.     <el-table :data="tableData">
   
5.       <el-table-column prop="name" label="姓名"></el-table-column>
   
6.       <el-table-column prop="age" label="年龄"></el-table-column>
   
7.       <el-table-column prop="city" label="城市"></el-table-column>
   
8.     </el-table>
   
9.   </div>
   
10. </template>
    
11. <script>
    
12. import axios from 'axios';
    
13. export default {
    
14.   data() {
    
15.     return {
    
16.       tableData: []
    
17.     };
    
18.   },
    
19.   mounted() {
    
20.     axios.get('https://api.example.com/data') // 替换为您的数据接口
    
21.       .then(response => {
    
22.         this.tableData = response.data; // 假设接口返回数据为数组格式
    
23.         console.log('获取的数据（中文输出）:', this.tableData);
    
24.       })
    
25.       .catch(error => {
    
26.         console.error('获取数据出错:', error);
    
27.       });
    
28.   }
    
29. }
    
30. </script>

复制代码

在这个示例中：
- 使用 Element UI 的  `el-table`  和  `el-table-column`  组件展示数据。
- 通过 Axios 发起 HTTP GET 请求来获取数据。
- 将获取到的数据赋值给  `tableData`  数据属性，并在控制台中输出中文数据。
- 请将示例中的接口地址替换为您实际使用的数据接口地址。
通过这种方式，您可以在 Vue.js 中使用 Element UI 的表格组件展示通过 HTTP 请求获取的数据，并进行中文输出。