【Vue&ElementUI学习】axios获取后端数据并展示到页面

最新推荐文章于 2024-10-09 16:42:18 发布

m0_55126564

最新推荐文章于 2024-10-09 16:42:18 发布

阅读量2k

点赞数

分类专栏： VUE 文章标签： vue.js

本文链接：https://blog.csdn.net/m0_55126564/article/details/123859991

版权

本文介绍如何在Vue项目中结合ElementUI，使用axios从后端获取数据并将其显示在表格组件上。首先，我们将在main.js中引入axios。接着，通过sim.vue组件来设置请求和数据绑定。最后，利用ElementUI的table组件展示获取的数据。

摘要由CSDN通过智能技术生成

效果图：

1. main.js

import axios from 'axios'
Vue.prototype.axios = axios

2.sim.vue

<script>
  export default {
    name: 'Sim',
    beforeRouteEnter: (to, from, next) => {
      console.log('进入SIM页面')
      next(vm => {
        vm.getData()
      })
    },
    beforeRouteLeave: (to, from, next) => {
      console.log('离开SIM页面')
      next()
    },
    methods: {
      handleClick (row) {
        console.log(row)
      },
      getData: function () {
        var _this = this
        this.axios({
          method: 'get',
          url: 'http://localhost:8888/sim/list'
        }).then(function (response) {
          _this.tableData = response.data.data
        }).catch(function (error) {
          console.log(e