axios动态更新el-table的注意事项

最新推荐文章于 2025-06-05 11:39:56 发布

原创最新推荐文章于 2025-06-05 11:39:56 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

前端技术专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Vue项目中使用Axios获取数据并动态更新Element UI Table组件时遇到的问题及解决方法。作者在尝试直接更新data未成功后，通过一种间接方式解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在写一个demo,尝试用vue+axios更新el-table,结果发现一直失败,后来百度才找到了问题,

在vue的方法里更新data时,不能使用下面的代码(原因未知)

 this.jobList = response.data.result

而要这样周转一把:

 //必不可少
    var _this = this //很重要！！
     /**
       其他代码
      */
    _this.jobList = response.data.result

        <section class="content container-fluid">
                <div id="showJobs" class="position: relative; height: 300px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
                    <i class="el-icon-success"></i>
                    <el-table border highlight-current-row :data="jobList" style="width: 100%">
                        <el-table-column label="任务名称" prop="jobName" width="380"></el-table-column>
                        <el-table-column label="上次执行时间" prop="lastExecuteTime" width="260"></el-table-column>
                        <el-table-column label="结果状态" prop="jobResultStatus" width="100">
                            <template slot-scope="scope">

                            </template>

                        </el-table-column>
                        <el-table-column label="隶属用户" prop="fullName" width="100"></el-table-column>
                        <el-table-column label="任务说明" prop="remark" width="220"></el-table-column>
                        <el-table-column label="操作" width="180"></el-table-column>
                    </el-table>
                </div>
            </section>

<script>
        var instance = axios.create({
            baseURL: 'http://localhost:8080',
            timeout: 1000
        });
        var vm = new Vue({
            el: "#showJobs",
            data: {
                jobList: [ ]
            },
            methods: {
                fetchJobs: function () {
                    //必不可少
                    var _this = this //很重要！！
                    instance.post('/job/list')
                        .then(function (response) {
                            _this.jobList = response.data.result
                            console.log(response.data.result);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });

        vm.fetchJobs();
    </script>