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)
});