項目中遇到的一個小功能，原來的開發的寫法可能有點冗余了，擴展性不高，又出了點小bug，特此回來自己寫個類似的小demo，遇到的一些問題記錄一下。

大概這樣

一個操作保留在本地的一個小表格(簡化樣式了)

請求的數據是所有的 name 列的數據

name列是個select，option會隨著表格數據的增加而改變，也就是option不會和列表數據重復

三個主要方法，add，delete，change。因為最近想學習下lodash，深拷貝用的 _.cloneDeep()

設計

開始前一定思考下這個怎么實現會比較好，項目用的vue，拋棄原本的jquery，基于vue的數據驅動去做，響應式這塊vue幫我們做好了。

下面是html的寫法，一個v-for去實現頁面

add

name

delete

{{text.name}}	delete

表格的數據是 dataList，數據結構這樣

dataList:[

{

id:'a',//做提交時需要，當前行數據的id

list:[//name 列select的option數據

{

name:'a',

id:'a'

},

{

name:'b',

id:'b'

},

{

name:'c',

id:'c'

},

{

name:'d',

id:'d'

},

]

}

]

這里是最簡單的結構了

然后一般我們在初始化的時候向后臺請求到初始的數據，就是dataList中的list，我這里設定的假數據這樣

resource:[

{

name:'a',

id:'a'

},

{

name:'b',

id:'b'

},

{

name:'c',

id:'c'

},

{

name:'d',

id:'d'

},

]

初始化

init(){

let resource=_.cloneDeep(this.resource)

let obj={

list:resource,

id:resource[0].id

};

this.dataList=[];

this.dataList.push(obj);

}

這里出現了深拷貝，因為我們的數據結構是引用類型嵌套引用類型，這里如果不深拷貝，那下面我對dataList中的項進行更改時，this.resource也會被更改。這個demo里，this.resource是不可以被污染更改的。這也是坑之一了

add

add(){

let that=this;

//新建條數限制

if(that.dataList.length>=that.resource.length){

return false

}

//深拷貝數據

let allData=_.cloneDeep(that.resource);

// 新增時，判斷已經創建的數據，然后先在對應的數據里刪除

//這里對allData進行了操作，splice操作會直接更改原數組，并且allData是外層循環，如果先splice后，再循環內層，在運行 [i].id這個操作時會報錯

//allData是復制出來的源數組，dataList是表格內的數組

for(let i=0;i

for(let j =0;j

if(that.dataList[i].id===allData[j].id){

allData.splice(j,1)

}

};

};

//推入一組數據

let obj={

list:allData,

id:allData[0].id

};

that.dataList.push(obj);

//把所有已選的數據單獨放置到一個arr數組里

let arr=[];

for(let k=0,len=that.dataList.length;k

arr.push(that.dataList[k].id);

};

//在dataList的list項中刪除所有的已選數據

for(let o =0; o

for(let u =0; u

for(let p=0; p

if(arr[u]==that.dataList[o].list[p].id){

that.dataList[o].list.splice(p,1);

}

};

};

};

//dataList的list項中將自身的id對應的數據推入

for(let r =0; r

for(let e =0; e

if(that.resource[r].id==that.dataList[e].id){

that.dataList[e].list.unshift(that.resource[r]);

}

};

};

},

這里除去深拷貝的坑，還有一個是 如果在嵌套循環中需要更改數組(例如splice方法)，那么需要被更改的數組一定最后一個被嵌套循環。否則在一些判斷條件里會出錯.

delete

deleteTr(msg,index){

let that=this;

if(that.dataList.length<=1){

return false;

}

//先直接刪除,去掉對應數據

that.dataList.splice(index,1);

//處理對應數據里下拉框里的數據

//復制一份源數據

let allData=_.cloneDeep(that.resource);

let obj={};

//遍歷找出刪掉的是數組里的哪個數據,然后吧他給obj

for(let i=0,len=allData.length; i

if(msg.id===allData[i].id){

obj=allData[i]

}

};

//循環dataList，將刪除的數據推進dataList的list里面

for(let o =0; o

that.dataList[o].list.push(obj);

};

},

這里正常刪除再添加

change

change(msg,index){

let that=this;

//更改dataList中的list

//把所有已選的數據單獨放置到一個arr數組里

let arr=[];

for(let k=0,len=that.dataList.length;k

arr.push(that.dataList[k].id);

};

//在dataList的list項中刪除所有的已選數據

for(let o =0; o

that.dataList[o].list=_.cloneDeep(that.resource);

for(let u =0; u

for(let p=0; p

if(arr[u]==that.dataList[o].list[p].id){

that.dataList[o].list.splice(p,1);

}

};

};

};

//dataList的list項中將自身的id對應的數據推入

for(let r =0; r

for(let e =0; e

if(that.resource[r].id==that.dataList[e].id){

that.dataList[e].list.unshift(that.resource[r]);

}

};

};

}

這里我把select的v-model設置成msg.id，這樣每次切換時id會自動變化。

// let allData=_.cloneDeep(that.resource);

for(let i =0,len=that.dataList.length; i

that.dataList[i].list=_.cloneDeep(that.resource);

};

這一段最開始也錯了，開始是注釋的那行。

dataList里的每個list都需要獨立的內存地址，所以這里需要循環深拷貝。

總結

剛剛寫完代碼，測了下功能沒有問題就來記錄了，代碼還沒有迭代優化，自己也沒有想到更好的處理數據的方法，但是總覺得自己這個嵌套著的循環性能有些低下了。

會優化一下代碼

剛回看一下就發現不少需要改的地方。不過需要休息了，下次編輯一下

日常鼓勵自己。。。

這樣的表格也的確不適合數據量大的情況，數據量大的情況需要換一下實現思路。

msl比賽1:1時開始寫功能，寫完看下朋友圈，md好像錯過了什么。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的java一键保存表格增删改,一个增删改功能的表格小demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。