亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

一個(gè)增刪改功能的表格小demo

ideaa / 1309人閱讀

摘要：項(xiàng)目中遇到的一個(gè)小功能，原來(lái)的開發(fā)的寫法可能有點(diǎn)冗余了，擴(kuò)展性不高，又出了點(diǎn)小，特此回來(lái)自己寫個(gè)類似的小，遇到的一些問(wèn)題記錄一下。這個(gè)里，是不可以被污染更改的。

項(xiàng)目中遇到的一個(gè)小功能，原來(lái)的開發(fā)的寫法可能有點(diǎn)冗余了，擴(kuò)展性不高，又出了點(diǎn)小bug，特此回來(lái)自己寫個(gè)類似的小demo，遇到的一些問(wèn)題記錄一下。
大概這樣

一個(gè)操作保留在本地的一個(gè)小表格（簡(jiǎn)化樣式了）

請(qǐng)求的數(shù)據(jù)是所有的 name 列的數(shù)據(jù)

name列是個(gè)select，option會(huì)隨著表格數(shù)據(jù)的增加而改變，也就是option不會(huì)和列表數(shù)據(jù)重復(fù)

三個(gè)主要方法，add，delete，change。因?yàn)樽罱雽W(xué)習(xí)下lodash，深拷貝用的 _.cloneDeep()

設(shè)計(jì)

開始前一定思考下這個(gè)怎么實(shí)現(xiàn)會(huì)比較好，項(xiàng)目用的vue，拋棄原本的jquery，基于vue的數(shù)據(jù)驅(qū)動(dòng)去做，響應(yīng)式這塊vue幫我們做好了。

下面是html的寫法，一個(gè)v-for去實(shí)現(xiàn)頁(yè)面

 

       

          
      

      

          

              
                name    
              
              
                  delete

表格的數(shù)據(jù)是 dataList，數(shù)據(jù)結(jié)構(gòu)這樣

dataList:[
         {
             id:"a",//做提交時(shí)需要，當(dāng)前行數(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ǎn)單的結(jié)構(gòu)了

然后一般我們?cè)诔跏蓟臅r(shí)候向后臺(tái)請(qǐng)求到初始的數(shù)據(jù)，就是dataList中的list，我這里設(shè)定的假數(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)了深拷貝，因?yàn)槲覀兊臄?shù)據(jù)結(jié)構(gòu)是引用類型嵌套引用類型，這里如果不深拷貝，那下面我對(duì)dataList中的項(xiàng)進(jìn)行更改時(shí)，this.resource也會(huì)被更改。這個(gè)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);
            // 新增時(shí)，判斷已經(jīng)創(chuàng)建的數(shù)據(jù)，然后先在對(duì)應(yīng)的數(shù)據(jù)里刪除  
            //這里對(duì)allData進(jìn)行了操作，splice操作會(huì)直接更改原數(shù)組，并且allData是外層循環(huán)，如果先splice后，再循環(huán)內(nèi)層，在運(yùn)行 [i].id這個(gè)操作時(shí)會(huì)報(bào)錯(cuò)
            //allData是復(fù)制出來(lái)的源數(shù)組，dataList是表格內(nèi)的數(shù)組
            for(let i=0;i

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

delete

        deleteTr(msg,index){
            let that=this;
            if(that.dataList.length<=1){
                return false;
            }
            //先直接刪除,去掉對(duì)應(yīng)數(shù)據(jù)
            that.dataList.splice(index,1);
            //處理對(duì)應(yīng)數(shù)據(jù)里下拉框里的數(shù)據(jù)
            //復(fù)制一份源數(shù)據(jù)
            let allData=_.cloneDeep(that.resource);
            let obj={};
            //遍歷找出刪掉的是數(shù)組里的哪個(gè)數(shù)據(jù),然后吧他給obj
            for(let i=0,len=allData.length; i

這里正常刪除再添加

change

        change(msg,index){
            let that=this;
            //更改dataList中的list
            //把所有已選的數(shù)據(jù)多帶帶放置到一個(gè)arr數(shù)組里
            let arr=[];
            for(let k=0,len=that.dataList.length;k

這里我把select的v-model設(shè)置成msg.id，這樣每次切換時(shí)id會(huì)自動(dòng)變化。


 //         let allData=_.cloneDeep(that.resource);
            for(let  i =0,len=that.dataList.length; i

這一段最開始也錯(cuò)了，開始是注釋的那行。
dataList里的每個(gè)list都需要獨(dú)立的內(nèi)存地址，所以這里需要循環(huán)深拷貝。

總結(jié)

剛剛寫完代碼，測(cè)了下功能沒(méi)有問(wèn)題就來(lái)記錄了，代碼還沒(méi)有迭代優(yōu)化，自己也沒(méi)有想到更好的處理數(shù)據(jù)的方法，但是總覺(jué)得自己這個(gè)嵌套著的循環(huán)性能有些低下了。
會(huì)優(yōu)化一下代碼
剛回看一下就發(fā)現(xiàn)不少需要改的地方。不過(guò)需要休息了，下次編輯一下
日常鼓勵(lì)自己。。。


這樣的表格也的確不適合數(shù)據(jù)量大的情況，數(shù)據(jù)量大的情況需要換一下實(shí)現(xiàn)思路。


msl比賽1:1時(shí)開始寫功能，寫完看下朋友圈，md好像錯(cuò)過(guò)了什么。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95132.html

相關(guān)文章

  • Jquery + dataTable + Bootstrap + 完整邏輯實(shí)現(xiàn)表格的增刪改查

    摘要：最近在做畢設(shè)，同學(xué)在做前端頁(yè)面的時(shí)候使用到和這些控件，然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)的實(shí)現(xiàn)，于是就自己去官網(wǎng)文檔上學(xué)習(xí)了一下，嘗試實(shí)現(xiàn)這個(gè)官方文檔代碼代碼效果如下圖示頂部結(jié)構(gòu)頁(yè)面上的三個(gè)，增刪改新增修改刪除這里的框的 最近在做畢設(shè)，同學(xué)在做前端頁(yè)面的時(shí)候使用到JQuery、DataTable和Bootstrap這些控件，然后自己又在刷題的時(shí)候遇到一個(gè)這個(gè)demo的實(shí)現(xiàn)，于是就自己去...

    oneasp 評(píng)論0 收藏0

  • fsLayui介紹(layui插件)

    摘要：是一個(gè)基于的快速開發(fā)插件，支持?jǐn)?shù)據(jù)表格增刪改查操作，提供通用的組件，通過(guò)配置實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，減少前端重復(fù)開發(fā)的工作。 fsLayui 是一個(gè)基于layui的快速開發(fā)插件，支持?jǐn)?shù)據(jù)表格增刪改查操作，提供通用的組件，通過(guò)配置html實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，減少前端js重復(fù)開發(fā)的工作。 GitHub下載 碼云下載 測(cè)試環(huán)境地址：http://fslayui.itcto.cn 為什么要使用fsLa...

    Barry_Ng 評(píng)論0 收藏0

  • 表格的增刪改demo

    摘要：前端菜鳥，下午沒(méi)什么活兒，寫了個(gè)不過(guò)腦子的，十分喜歡妖尾，就用妖尾做了模擬數(shù)據(jù)，大伙兒輕噴。 前端菜鳥，下午沒(méi)什么活兒，寫了個(gè)不過(guò)腦子的demo，十分喜歡妖尾，就用妖尾做了模擬數(shù)據(jù)，大伙兒輕噴。設(shè)計(jì)感為0，頁(yè)面配色丑得我都不想看，在此膜拜我司UI工程師，很多實(shí)現(xiàn)功能的地方?jīng)]有想到更好的辦法，希望各位大佬斧正！ 效果圖 showImg(https://segmentfault.com/i...

    lastSeries 評(píng)論0 收藏0

  • fsLayui聯(lián)動(dòng)表格使用(二)

    摘要：復(fù)雜聯(lián)動(dòng)表格使用點(diǎn)擊主表格，加載副表格數(shù)據(jù)，支持主副表格的增刪改查操作。演示地址復(fù)雜聯(lián)動(dòng)表格配置和基礎(chǔ)聯(lián)通表格類似，在基礎(chǔ)上擴(kuò)展一些增刪改查功能，基礎(chǔ)聯(lián)動(dòng)表格參考復(fù)雜的聯(lián)動(dòng)表格需要在基礎(chǔ)表格上增加配置和按鈕操作。 復(fù)雜聯(lián)動(dòng)表格使用 點(diǎn)擊主表格，加載副表格數(shù)據(jù)，支持主、副表格的 增刪改查 操作。 演示地址：http://fslayui.itcto.cn 復(fù)雜聯(lián)動(dòng)表格配置 和基礎(chǔ)聯(lián)通...

    miguel.jiang 評(píng)論0 收藏0

  • fsLayui聯(lián)動(dòng)表格使用(二)

    摘要：復(fù)雜聯(lián)動(dòng)表格使用點(diǎn)擊主表格，加載副表格數(shù)據(jù)，支持主副表格的增刪改查操作。演示地址復(fù)雜聯(lián)動(dòng)表格配置和基礎(chǔ)聯(lián)通表格類似，在基礎(chǔ)上擴(kuò)展一些增刪改查功能，基礎(chǔ)聯(lián)動(dòng)表格參考復(fù)雜的聯(lián)動(dòng)表格需要在基礎(chǔ)表格上增加配置和按鈕操作。 復(fù)雜聯(lián)動(dòng)表格使用 點(diǎn)擊主表格，加載副表格數(shù)據(jù)，支持主、副表格的 增刪改查 操作。 演示地址：http://fslayui.itcto.cn 復(fù)雜聯(lián)動(dòng)表格配置 和基礎(chǔ)聯(lián)通...

    kel 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<