Vue.js 表格查询与更新

来源：互联网发布：电子挂历制作软件编辑：程序博客网时间：2024/06/06 04:14

Vue.js 实现表格数据绑定

可以利用vue.js生命周期事件created加载完后为表格提供数据

  var vm = new Vue({                el: "#table_content",                data: {                    ulist: []                },                methods: {                    getdata: function (_keycontent) {  //查询数据                        //先把本地对象缓存下来                        var self = this;                        $.get("GetUsersHandler.ashx", { keycontent: _keycontent, page: currentPage }, function (_result) {                            var jsobobj = JSON.parse(_result);                            self.ulist = jsobobj;                        });                    }                         },                created: function () {  //初始化事件里边去调用查询方法                    this.getdata("");                }            });

使用V-for解析数据

             <tr v-for="uitem in ulist">                        <td class="highlight">                            <div class="success"></div>                            <a href="#">{{uitem.Id}}</a>                        </td>                        <td class="hidden-phone">{{uitem.UserName}}</td>                        <td>                            <span class="label label-success">{{uitem.Number}}</span>                        </td>                        <td style="width: 200px">                            <a href="#" class="btn mini purple"><i class="icon-edit"></i>更新</a>                            <a href="#" class="btn mini black"><i class="icon-trash"></i>删除</a>                            <a href="#" class="btn mini blue"><i class="icon-share"></i>分享</a>                        </td>                    </tr>

效果：

Vue.js实现更新

其实只要点击更新按钮能够拿到值就好操作了

方法1：拿到更新按钮本身，在通过jquery去获取数据

 <a href="#" class="btn mini purple" v-on:click="vupdate($event)"><i class="icon-edit"></i>更新</a>

  methods: {                    vupdate: function (_my) {                        //***************获取数据的方法1，使用jquery获取*****************                        var needtr = $(_my.target).parent().parent();                        console.log(_my.target);                        alert(needtr.find("td").eq(1).html());                        alert(needtr.find("td").eq(2).html());                    },

方法2：利用vue绑定的数据

点击更新按钮的时候把改行数据源直接传递到方法里边去

   <a href="#" class="btn mini purple" v-on:click="vupdate(uitem)"><i class="icon-edit"></i>更新</a>

   methods: {                    vupdate: function (uitem) {                                            //***************获取数据的方法2，绑定的时候传递vue实例*****************                        console.log(uitem);                        alert(uitem.UserName);                        alert(uitem.Number);                        alert(uitem.Class);                        alert(uitem.Id);                    },

阅读全文

1 0