vue-cli4得到el-table表格对应行数据，并用axios向后台发送ajax请求（小白记一笔~）

最新推荐文章于 2024-08-13 16:44:40 发布

装下世界的脑洞

最新推荐文章于 2024-08-13 16:44:40 发布

阅读量2.6k

点赞数 1

本文链接：https://blog.csdn.net/duduyingya/article/details/104620938

版权

本文记录了一位初学者如何在Vue CLI4环境中，结合Element UI表格组件，通过点击按钮获取选定行的数据，并利用Axios向Springboot后台发送跨域AJAX请求的过程。主要涉及Vue配置、axios的使用以及与Element UI的交互。

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

环境：springboot，nodejs，vue，axios，element-ui，vue-cli4

1首先解决axios跨域问题

1 安装axios: npm install axios -S
2 因为我的vue-cli是4版本的，所以先在项目根目录新建一个vue.config.js文件(与src对齐)，并写下以下代码，因为vue-cli3以上的就将config文件夹内置了，我们想修改，就自己建就可以~

module.exports = {
    devServer:{
        proxy:{                      //vue-cli3以上的是proxy
            "/api":{                  //自己随便起的名字
                target: '服务器的ip',    //你要访问的服务器的ip，如果不知道,打开cmd，输入ipconfig查看ipv4即可,
                changeOrigin : true,
                ws: true,
                pathRewrite: {
                    '^/api': '/'     
                }
            }
        }
    }
}

3 在main.ts文件中引入以下代码

import axios from 'axios';      //引入axios
Vue.prototype.$http = axios;   //设置这行代码后，就可以在页面直接用  this.$http.get/post 发起请求了
axios.defaults.baseURL = '/api/' ; // api 即上面 vue.config.js 中配置的地址
 //这个是在发送post请求时设置的头，因为axios和ajax发送的头不一样，这样设置就可以了,其次还要引入Qs，局部引入
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2 通过el-button得到对应行数据

1 首先将表格双向绑定数据，其次给表格对象起个名字，这样才可以通过表格对象得到表格中显示出来的数据，并传给后台 (home.vue)

<!-- 给表格的data属性绑上vue实例中声明的tableData数组   -->
 <el-table :data="tableData" border  align="center">
<!-- 因为在想后台传数据时会用到当前行的id,所以将id隐藏了v-show="false"  -->
            <el-table-column  label="id"  width="10" v-show="false">
            <!--可以理解成给表格中数据起的别名~-->
              <template scope="scope"></template>
            </el-table-column>
            <el-table-column label="名字"  width