vue簡單的請求api並渲染到表格

環境

vue3.11

組件庫

https://element-plus.gitee.io/#/zh-CN

開始

初始化一個項目

App.vue

<template>
  <div>
      <div>
      已開放代理服務主機
      </div>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="hosts"
      label="Hosts"
      width="180">
    </el-table-column>
    <el-table-column
      prop="description"
      label="描述">
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
        data() {
          return {
            tableData: []
          }
        },
        created() {
        // 發送請求
        axios.get('http://127.0.0.1:8001/getsrciplist')
            .then(res => {
                // 打印請求結果
                //window.console.log(res.data)
                this.tableData=res.data
            })
        },
      }
</script>


<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);
Vue.config.productionTip = false


new Vue({
  el: '#app',
  render: h => h(App)
});