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

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

目录
相关文章
|
9天前
|
JavaScript
vue学习(8)数据代理
vue学习(8)数据代理
21 1
|
1月前
|
JavaScript
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
这篇文章通过一个实际的Vue项目案例,演示了如何在Vuex中实现多组件间共享数据。文章内容包括在Vuex的state中新增用户数组,创建Person.vue组件用于展示和添加用户信息,以及在Count组件中使用Person组件操作的数据。通过测试效果展示了组件间数据共享和状态更新的流程。
Vue学习之--------深入理解Vuex之多组件共享数据(2022/9/4)
|
19天前
|
JSON 前端开发 数据格式
layui 穿梭框transfer组件 数据data用ajax来获取
layui 穿梭框transfer组件 数据data用ajax来获取
30 2
|
7天前
|
JavaScript
Vue组件传值异步问题--子组件拿到数据较慢
Vue组件传值异步问题--子组件拿到数据较慢
11 0
|
1月前
|
JavaScript 前端开发
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
这篇文章介绍了Vue中使用v-model实现表单数据收集的方法,包括基础知识、代码实例和测试效果,并提供了一些额外建议。
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
|
1月前
|
JavaScript API
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
这篇博客文章讲解了Vue中列表排序的方法,使用`filter`、`sort`和`indexOf`等数组方法进行数据的过滤和排序,并探讨了Vue检测数据变化的原理,包括Vue如何通过setter和数组方法来实现数据的响应式更新。
Vue学习之--------列表排序(ffilter、sort、indexOf方法的使用)、Vue检测数据变化的原理(2022/7/15)
|
1月前
|
JavaScript
Element - Vue使用slot-scope和v-for遍历数据为树形表格
这篇文章介绍了在Vue中使用`slot-scope`和`v-for`指令来遍历数据并将其渲染为树形表格的方法。
25 0
Element - Vue使用slot-scope和v-for遍历数据为树形表格
|
1月前
|
JavaScript 数据处理
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
如何使用 Vue.js 将数据对象的值放入另一个数据对象中?
|
1月前
|
JavaScript UED
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
强制 Vue 重新渲染组件的5种方法,解决你开发过程中数据和视图无法同步的Bug。
|
2月前
|
开发框架 JavaScript 前端开发
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式
基于Vue的工作流项目模块中,使用动态组件的方式统一呈现不同表单数据的处理方式