資訊專欄INFORMATION COLUMN
摘要：項目中遇到的一個小功能，原來的開發(fā)的寫法可能有點冗余了，擴展性不高，又出了點小，特此回來自己寫個類似的小，遇到的一些問題記錄一下。這個里，是不可以被污染更改的。
項目中遇到的一個小功能，原來的開發(fā)的寫法可能有點冗余了，擴展性不高，又出了點小bug，特此回來自己寫個類似的小demo，遇到的一些問題記錄一下。
大概這樣
一個操作保留在本地的一個小表格（簡化樣式了）
請求的數(shù)據(jù)是所有的 name 列的數(shù)據(jù)
name列是個select，option會隨著表格數(shù)據(jù)的增加而改變，也就是option不會和列表數(shù)據(jù)重復
三個主要方法，add，delete，change。因為最近想學習下lodash，深拷貝用的 _.cloneDeep()
設計開始前一定思考下這個怎么實現(xiàn)會比較好，項目用的vue，拋棄原本的jquery，基于vue的數(shù)據(jù)驅(qū)動去做，響應式這塊vue幫我們做好了。
下面是html的寫法，一個v-for去實現(xiàn)頁面
name delete
表格的數(shù)據(jù)是 dataList，數(shù)據(jù)結(jié)構(gòu)這樣
dataList:[
{
id:"a",//做提交時需要，當前行數(shù)據(jù)的id
list:[//name 列select的option數(shù)據(jù)
{
name:"a",
id:"a"
},
{
name:"b",
id:"b"
},
{
name:"c",
id:"c"
},
{
name:"d",
id:"d"
},
]
}
]
這里是最簡單的結(jié)構(gòu)了
然后一般我們在初始化的時候向后臺請求到初始的數(shù)據(jù)，就是dataList中的list，我這里設定的假數(shù)據(jù)這樣
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);
}
這里出現(xiàn)了深拷貝，因為我們的數(shù)據(jù)結(jié)構(gòu)是引用類型嵌套引用類型，這里如果不深拷貝，那下面我對dataList中的項進行更改時，this.resource也會被更改。這個demo里，this.resource是不可以被污染更改的。這也是坑之一了
add add(){
let that=this;
//新建條數(shù)限制
if(that.dataList.length>=that.resource.length){
return false
}
//深拷貝數(shù)據(jù)
let allData=_.cloneDeep(that.resource);
// 新增時，判斷已經(jīng)創(chuàng)建的數(shù)據(jù)，然后先在對應的數(shù)據(jù)里刪除
//這里對allData進行了操作，splice操作會直接更改原數(shù)組，并且allData是外層循環(huán)，如果先splice后，再循環(huán)內(nèi)層，在運行 [i].id這個操作時會報錯
//allData是復制出來的源數(shù)組，dataList是表格內(nèi)的數(shù)組
for(let i=0;i
這里除去深拷貝的坑，還有一個是 如果在嵌套循環(huán)中需要更改數(shù)組（例如splice方法），那么需要被更改的數(shù)組一定最后一個被嵌套循環(huán)。否則在一些判斷條件里會出錯.
delete
deleteTr(msg,index){
let that=this;
if(that.dataList.length<=1){
return false;
}
//先直接刪除,去掉對應數(shù)據(jù)
that.dataList.splice(index,1);
//處理對應數(shù)據(jù)里下拉框里的數(shù)據(jù)
//復制一份源數(shù)據(jù)
let allData=_.cloneDeep(that.resource);
let obj={};
//遍歷找出刪掉的是數(shù)組里的哪個數(shù)據(jù),然后吧他給obj
for(let i=0,len=allData.length; i
這里正常刪除再添加
change
change(msg,index){
let that=this;
//更改dataList中的list
//把所有已選的數(shù)據(jù)多帶帶放置到一個arr數(shù)組里
let arr=[];
for(let k=0,len=that.dataList.length;k
這里我把select的v-model設置成msg.id，這樣每次切換時id會自動變化。
// let allData=_.cloneDeep(that.resource);
for(let i =0,len=that.dataList.length; i
這一段最開始也錯了，開始是注釋的那行。
dataList里的每個list都需要獨立的內(nèi)存地址，所以這里需要循環(huán)深拷貝。
總結(jié)
剛剛寫完代碼，測了下功能沒有問題就來記錄了，代碼還沒有迭代優(yōu)化，自己也沒有想到更好的處理數(shù)據(jù)的方法，但是總覺得自己這個嵌套著的循環(huán)性能有些低下了。
會優(yōu)化一下代碼
剛回看一下就發(fā)現(xiàn)不少需要改的地方。不過需要休息了，下次編輯一下
日常鼓勵自己。。。
這樣的表格也的確不適合數(shù)據(jù)量大的情況，數(shù)據(jù)量大的情況需要換一下實現(xiàn)思路。
msl比賽1:1時開始寫功能，寫完看下朋友圈，md好像錯過了什么。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/95132.html
摘要：最近在做畢設，同學在做前端頁面的時候使用到和這些控件，然后自己又在刷題的時候遇到一個這個的實現(xiàn)，于是就自己去官網(wǎng)文檔上學習了一下，嘗試實現(xiàn)這個官方文檔代碼代碼效果如下圖示頂部結(jié)構(gòu)頁面上的三個，增刪改新增修改刪除這里的框的 最近在做畢設，同學在做前端頁面的時候使用到JQuery、DataTable和Bootstrap這些控件，然后自己又在刷題的時候遇到一個這個demo的實現(xiàn)，于是就自己去...
摘要：是一個基于的快速開發(fā)插件，支持數(shù)據(jù)表格增刪改查操作，提供通用的組件，通過配置實現(xiàn)數(shù)據(jù)請求，減少前端重復開發(fā)的工作。 fsLayui 是一個基于layui的快速開發(fā)插件，支持數(shù)據(jù)表格增刪改查操作，提供通用的組件，通過配置html實現(xiàn)數(shù)據(jù)請求，減少前端js重復開發(fā)的工作。 GitHub下載 碼云下載 測試環(huán)境地址：http://fslayui.itcto.cn 為什么要使用fsLa...
摘要：前端菜鳥，下午沒什么活兒，寫了個不過腦子的，十分喜歡妖尾，就用妖尾做了模擬數(shù)據(jù)，大伙兒輕噴。 前端菜鳥，下午沒什么活兒，寫了個不過腦子的demo，十分喜歡妖尾，就用妖尾做了模擬數(shù)據(jù)，大伙兒輕噴。設計感為0，頁面配色丑得我都不想看，在此膜拜我司UI工程師，很多實現(xiàn)功能的地方?jīng)]有想到更好的辦法，希望各位大佬斧正！ 效果圖 showImg(https://segmentfault.com/i...
摘要：復雜聯(lián)動表格使用點擊主表格，加載副表格數(shù)據(jù)，支持主副表格的增刪改查操作。演示地址復雜聯(lián)動表格配置和基礎聯(lián)通表格類似，在基礎上擴展一些增刪改查功能，基礎聯(lián)動表格參考復雜的聯(lián)動表格需要在基礎表格上增加配置和按鈕操作。 復雜聯(lián)動表格使用 點擊主表格，加載副表格數(shù)據(jù)，支持主、副表格的 增刪改查 操作。 演示地址：http://fslayui.itcto.cn 復雜聯(lián)動表格配置 和基礎聯(lián)通...
摘要：復雜聯(lián)動表格使用點擊主表格，加載副表格數(shù)據(jù)，支持主副表格的增刪改查操作。演示地址復雜聯(lián)動表格配置和基礎聯(lián)通表格類似，在基礎上擴展一些增刪改查功能，基礎聯(lián)動表格參考復雜的聯(lián)動表格需要在基礎表格上增加配置和按鈕操作。 復雜聯(lián)動表格使用 點擊主表格，加載副表格數(shù)據(jù)，支持主、副表格的 增刪改查 操作。 演示地址：http://fslayui.itcto.cn 復雜聯(lián)動表格配置 和基礎聯(lián)通...
閱讀 2409·2021-11-23 09:51
閱讀 1220·2021-11-22 13:54
閱讀 3433·2021-09-24 10:31
閱讀 1100·2021-08-16 10:46
閱讀 3632·2019-08-30 15:54
閱讀 713·2019-08-30 15:54
閱讀 2896·2019-08-29 17:17
閱讀 3172·2019-08-29 15:08
