vue简单的请求api并渲染到表格

环境

组件库

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

__EOF__

本文作者：带着泥土
本文链接：https://www.cnblogs.com/obitoma/p/14447002.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！