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

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

目录
相关文章
|
1天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
7 0
|
1天前
|
JavaScript
【vue实战】父子组件互相传值
【vue实战】父子组件互相传值
6 1
|
1天前
|
JavaScript
vue2_引入Ant design vue
vue2_引入Ant design vue
6 0
|
1天前
|
JavaScript
vue知识点
vue知识点
10 4
|
2天前
|
存储 JavaScript 前端开发
【Vue】绝了!这生命周期流程真...
【Vue】绝了!这生命周期流程真...
|
2天前
|
JavaScript 索引
【vue】框架搭建
【vue】框架搭建
7 1
|
2天前
|
JavaScript 前端开发 容器
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
Vue 的 `Transition` 和 `TransitionGroup` 是用于状态变化过渡和动画的组件。`Transition` 适用于单一元素或组件的进入和离开动画,而 `TransitionGroup` 用于 v-for 列表元素的增删改动画,支持 CSS 过渡和 JS 钩子。
< 每日小技巧: 基于Vue状态的过渡动画 - Transition 和 TransitionGroup>
|
2天前
|
JavaScript
【vue】setInterval的嵌套实例
【vue】setInterval的嵌套实例
8 1
|
2天前
|
JavaScript 前端开发 安全
【Vue】内置指令真的很常用!
【Vue】内置指令真的很常用!
|
2天前
|
JavaScript
【Vue】过滤器Filters
【Vue】过滤器Filters