vue使用ajax返回数据赋值给table无法立即生效问题

简介: 主要问题是:ajax返回之后默认无法勾选,虽然data已经赋值,但是页面并没有生效

页面table:

<div class="phoneSource" style="width: 30%; float: left; height: 100%">
    <i-table height="480" border ref="selection" :columns="phoneSourceColumns" :data="phoneSourceData" @on-selection-change="selectSource"></i-table>
</div>

无法生效代码:
//与数据列相等,直接全选

if(vmMaterialMangerAdd.phoneSourceData.length == dataDictionarys.length) {
        vmMaterialMangerAdd.$refs.selection.selectAll(true);
} else {
        for (var i = 0; i < dataDictionarys.length; i++) {
            var dataDictionary = dataDictionarys[i];
            vmMaterialMangerAdd.phoneSourceData.findIndex(
                function(x, index) {
                    if(x.value == dataDictionary.dictionaryId) {
                        vmMaterialMangerAdd.$refs.selection.toggleSelect(index,true);
                    }
                }
            );
        }
}

phoneSourceData 是通过ajax返回直接赋值的:vmMaterialMangerAdd.phoneSourceData = data.data;
但是,这样不生效
QQ_20180705105626

通过debugger的方式,发现在赋值phoneSourceData时,页面并没有画完
并且发现table也没有什么好用的事件或者监听
查官当发现实例的生命周期:
QQ_20180705105450

主要涉及的就是create,mounted,destroyed这三个切入点,观察图,发现mounted应该是要使用的切入点

mounted:function(){
    this.$refs.selection.selectAll(true);    //先简单写个全选
}

然后惊喜的发现,还是不能用~~~~
好吧,没辙了,闲逛吧。。。
发现了新大陆:
QQ_20180705105553

点进去看看

QQ_20180705105602

再试试,可以了。。。

vmMaterialMangerAdd.$nextTick(function () {
    vmMaterialMangerAdd.$refs.selection.selectAll(true);
})

QQ_20180705105613

注:百度查不到就去查官档吧

目录
相关文章
|
4月前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
195 64
|
4月前
|
监控 JavaScript 算法
深度剖析 Vue.js 响应式原理:从数据劫持到视图更新的全流程详解
本文深入解析Vue.js的响应式机制,从数据劫持到视图更新的全过程,详细讲解了其实现原理和运作流程。
|
4月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
98 3
|
4月前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
93 1
|
4月前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
95 1
|
5月前
|
API
vue3知识点:响应式数据的判断
vue3知识点:响应式数据的判断
47 3
|
5月前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
65 2
|
5月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
138 4
|
5月前
|
JavaScript
vue3,使用watch监听props中的数据
【10月更文挑战第3天】
2664 2
|
5月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
34 0