我期望vue中tds全都渲染在界面上之后,再调用一个函数(其实这个函数主要作用是给表格中的选择框加监听,如果tds没有渲染,那监听也加不上去)。

<div class="row" id="app">
        <div class="col-sm-12 col-md-12 main">
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <th><input type="checkbox" id="checkAll" name="checkAll" /></th>
                    <th>日期</th>
                    <th>任务</th>
                    <th>是否执行</th>
                    <th>执行结果</th>
                    <th>影响行数</th>
                    <th>执行时间</th>
                    <th>执行时长</th>
                    <th>成功率</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="trs">
                <tr v-for="td in tds">
                    <td><input type="checkbox" name="checkItem" /></td>
                    <td>{{td.date}}</td>
                    <td>{{td.job}}</td>
                    <td>{{td.is_done==0?'未执行':'已执行'}}</td>
                    <td>{{td.is_success==0?'成功':(td.is_success==1?'失败':'')}}</td>
                    <td>{{td.nums}}</td>
                    <td>{{td.begintime}}</td>
                    <td>{{td.usedtime}}</td>
                    <td>{{td.rate}}</td>
                    <td v-if="td.is_done==0">
                    </td>
                    <td v-if="td.is_done==1">
                        <button v-on:click="rerun($index,td.monitor_id)" type="button" class="btn btn-default btn-xs"
                                style="padding:1px 10px;margin-top:-3px;margin-bottom:-2px;">重跑
                        </button>
                    </td>
                </tr>
                </tbody>
            </table>


        </div>
        <!--/.main -->
    </div>

尝试了

Vue.nextTick(function () {
  alert('new message'); // true
})

无效,在tds未展示在界面上时就alert了。

尝试了

vm.$nextTick(function () {
  alert('new message'); // true
})
也无效,在tds未展示在界面上时就alert了。

最后解决办法是增加一个vm.$watch('tds',function(val){ })函数,在vm改变后调用nextTick,最终可以在tds展示在界面之后调用我想要的函数。

var vm = new Vue({
        el: '#app',
        ready: function () {
            $.getJSON("/main/getMonitor", {"beginDate": getTheDate(-2), "endDate": getTheDate(0)}, function (result) {
                vm.$set('tds', result);
            });
        },
        data: {
            start: getTheDate(-2),
            end: getTheDate(0),
            isupdate: 0
        },
//			computed: {
//				// 一个计算属性的 getter
//				tds: function () {
//					var myr="";
//					$.getJSON("/main/getMonitor", {"beginDate": getTheDate(-2),"endDate": getTheDate(0)}, function (result) {
//						myr= result;
//					});
//					return myr;
//				}
//			},
        methods: {
            rerun: function (index, monitor_id) {
                var button = $('#trs').children().eq(index).children().eq(9).children().eq(0);
                button.prop('disabled', true);
                button.html('重跑中<span class="dotting"></span>');
//                $.getJSON("http://m.o2.qq.com/Api/rerunMonitor", {"monitorID": monitor_id}, function (result) {
//                    console.log(result);
//                    vm.isupdate=(this.isupdate==0?1:0);
//                    button.html('重跑');
//                    button.prop('disabled', false);
//                });
                $.ajax({
                    url: "http://m.o2.qq.com/Api/rerunMonitor",
                    // The name of the callback parameter, as specified by the YQL service
                    jsonp: "callback",
                    // Tell jQuery we're expecting JSONP
                    dataType: "jsonp",
                    // Tell YQL what we want and that we want JSON
                    data: {
                        monitorID: monitor_id
                    },
                    // Work with the response
                    success: function (response) {
                        console.log(response); // server response
                        vm.isupdate = (vm.isupdate == 0 ? 1 : 0);
                        button.html('重跑');
                        button.prop('disabled', false);
                    }
                });
            }
        }
    })

    vm.$watch('start', function (val) {
        $.getJSON("/main/getMonitor", {"beginDate": val, "endDate": this.end}, function (result) {
            vm.tds = result;
        });
    })

    vm.$watch('end', function (val) {
        $.getJSON("/main/getMonitor", {"beginDate": this.start, "endDate": val}, function (result) {
            vm.tds = result;
        });
    })

    vm.$watch('isupdate', function (val) {
        $.getJSON("/main/getMonitor", {"beginDate": this.start, "endDate": this.end}, function (result) {
            vm.tds = result;
        });
    })

    vm.$watch('tds',function(val){
        vm.$nextTick(function() {
            initTableCheckbox();
        });
    })

Logo

前往低代码交流专区

更多推荐