一：先使用Vue.js綁定好數(shù)據(jù)與更新事件

使用v-on綁定好事件,在事件里邊直接把該行數(shù)據(jù)傳遞進去，在更新方法里邊就可以直接取出需要更新的數(shù)據(jù)

選擇	用戶名	學號	班級	操作
	{{item.UserName}}	{{item.Number}}	{{item.Class}}	刪除 更新

//實例化vue.js(用來給表格提供數(shù)據(jù)的)

var vm = new Vue({

el: '#content',

data: {

mydata: data

},

methods: {

udelete: function (_id) //刪除

{

},

updateu: function (item) //更新

{

}

}

});

效果如下：

二：點擊更新事件彈出layer更新框

先寫好html

@* 給layer彈出層提供數(shù)據(jù) *@

用戶名:
學號:
班級:

彈出layer

updateu: function (item) //更新

{

layer.open({

type: 1,

title: "更新",

area: ["300px", "230px"],

content: $("#updatecontent"),

btn: ["保存"],

yes: function (index) {

alert("點擊保存");

},

cancel: function () { //點擊關閉按鈕

}

});

}

效果如下：

三：為layer彈框提供好數(shù)據(jù)

傳統(tǒng)的做法就是把值一個一個的取出來，然后在賦值給文本框，現(xiàn)在可以使用vue.js一次性綁定好

實例化一個vue專門為彈框內(nèi)的文本框提供數(shù)據(jù)

//給更新div添加數(shù)據(jù)

var update_vm = new Vue({

el: "#updatecontent",

data: {

userinfo: {}

}

});

點擊更新按鈕的時候我們已經(jīng)把該行的值通過一個對象傳過來了,

直接綁定到vue.js里邊

updateu: function (item) //更新

{

update_vm.$data.userinfo = item;

}

這樣就能在點擊的時候拿到需要更新的數(shù)據(jù)了

而且由于雙向綁定，當文本框發(fā)送變化的時候，表格內(nèi)容也會自動變化

四：點擊保存實現(xiàn)更新

傳統(tǒng)的做法就是拿到更新后的值，也就是更具id獲取文本框的值，然后組裝成json對象，傳入后臺就可以實現(xiàn)更新。

使用vue.js就可以避免

自己組裝對象了，因為是雙向綁定，文本框的值改變model值自動改變

我們直接把Model的值傳回后臺實現(xiàn)更新就行了

layer.open({

type: 1,

title: "更新",

area: ["300px", "230px"],

content: $("#updatecontent"),

btn: ["保存"],

yes: function (index) {

//調(diào)用后臺實現(xiàn)更新

$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {

});

},

cancel: function () { //點擊關閉按鈕

}

});

后臺使用ef直接更新就行了

//更新

public JsonResult UpdateU(Users uinfo)

{

testEntities en = new testEntities();

en.Entry(uinfo).State = System.Data.EntityState.Modified;

int count = en.SaveChanges();

return Json(count);

}

以上使用vue+layer實現(xiàn)更新，沒有任何組織數(shù)據(jù)的地方,我們子需要關注數(shù)據(jù)本身就行了

如果在改變文本框值得時候不希望表格內(nèi)自動改變，可以克隆一個對象在綁定

因為這樣如果用戶點擊了關閉，需要自己會恢復成沒有更新的數(shù)據(jù)

利用jquery克隆一個對象在綁定就而已了

updateu: function (item) //更新

{

//克隆一個對象

var databack = $.extend({}, item);

update_vm.$data.userinfo = databack;

}

這樣的話數(shù)據(jù)庫是更新了頁面沒有被更新，可以直接刷新網(wǎng)頁

當然也可以使用更新Model來更新頁面，直接把vue.js數(shù)據(jù)替換從而更新更新到頁面

$.post('/home/UpdateU', update_vm.$data.userinfo, function (result) {

//可以把vue.js數(shù)據(jù)替換從而更新更新到頁面

vm.$data.mydata.splice(index, index, update_vm.$data.userinfo);

});

以上這篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的vue表格刷新数据_Vue.js+Layer表格数据绑定与实现更新的实例的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。