webpack+vue項(xiàng)目實(shí)戰(zhàn)（四，前端與后端的數(shù)據(jù)交互和前端展示數(shù)據(jù)）

Yumenokanata 發(fā)布于2019-08-20 17:47 / 3374人閱讀

摘要：簡(jiǎn)單點(diǎn)說(shuō)呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來(lái)，用到的資源主要是和，其它參考插件使用。當(dāng)時(shí)，加載中的提示就會(huì)出現(xiàn)。后端返回的數(shù)據(jù)如上圖，并不是所有的字段都是可以進(jìn)行搜索的字段。

1.前言

今天要做的，就是在上一篇文章的基礎(chǔ)上，進(jìn)行功能頁(yè)面的開(kāi)發(fā)。簡(jiǎn)單點(diǎn)說(shuō)呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來(lái)，用到的資源主要是element-ui和vue-resource，其它參考（vue-resource插件使用）。今天講到的一些功能開(kāi)發(fā)，主要就是請(qǐng)求列表數(shù)據(jù)，詳情數(shù)據(jù)，分頁(yè)功能操作，搜索，搜索標(biāo)簽等的開(kāi)發(fā)。今天這個(gè)，按照下面步驟，一步一步來(lái)。一個(gè)一個(gè)功能的做！

2.數(shù)據(jù)接口

我以‘回款管理’(cashList.vue)為開(kāi)發(fā)的demo，下文講到的各種增刪改查都是在這個(gè)文件上操作，大家注意喔！這雖然是做5個(gè)功能，其實(shí)就只有兩個(gè)接口。（按照我開(kāi)發(fā)項(xiàng)目，后端提供的接口說(shuō)明）

2-1分析接口

下面分析下我們公司后端給我提供的其中兩個(gè)接口。而且兩個(gè)接口都是get請(qǐng)求。

let http_url={
    list:"http://xxx.xxx.com/xxx/cash/list",
    detail:"http://xxx.xxx.com/xxx/cash/detail"
}

/**
http_url.list接口接受參數(shù)
ordId  //String，訂單號(hào)
cashId //String.回款編號(hào)
custoName //String，客戶(hù)名稱(chēng)，模糊查詢(xún)
cashType //int，回款類(lèi)型
cashStatus //int，回款狀態(tài)
userName//String，采購(gòu)人，模糊查詢(xún)
userMobile //String，采購(gòu)人電話(huà)，模糊查詢(xún)
//上面是搜索查詢(xún)的字段，下面是數(shù)據(jù)的頁(yè)碼和每頁(yè)的條數(shù)
pogeNo //int，頁(yè)碼(必填)
pageSize //int，每頁(yè)顯示條數(shù)(必填)


http_url.detail接口接受參數(shù)（按照我開(kāi)發(fā)項(xiàng)目）
cashId //String.回款編號(hào)(必填)
**/

2-2整理數(shù)據(jù)

首先，由于接口http_url.list接口可以接受一些搜索，先把整個(gè)準(zhǔn)備了！

然后再到頁(yè)碼的一些東西，主要是三個(gè)，當(dāng)前頁(yè)碼，每頁(yè)條數(shù)。（自己隨便設(shè)的默認(rèn)值）
數(shù)據(jù)就變成了

data(){
    return {
        pageSize:10,//每頁(yè)條數(shù)
        allCount:0,//記錄總數(shù)
        currentPage:1,//當(dāng)前頁(yè)碼
        cashList: [],   //列表數(shù)組(現(xiàn)在是準(zhǔn)備請(qǐng)求接口，不需要模擬的數(shù)據(jù)，所以設(shè)置一個(gè)空數(shù)組)
        keyFrom: {....}//搜索字段
    }
}

大家可能不明白，同樣是請(qǐng)求的參數(shù)，頁(yè)碼這些為什么要和搜索字段分開(kāi)放？之所以分開(kāi)放是因?yàn)轫?yè)碼這些，到下面分頁(yè)的時(shí)候要多帶帶使用，而且做搜索的時(shí)候，頁(yè)碼又不是搜索字段，所以就分開(kāi)放，下面會(huì)詳情的說(shuō)明！

準(zhǔn)備就準(zhǔn)備這么多了，之后還要用到什么數(shù)據(jù)，以后再添加！

3.請(qǐng)求列表數(shù)據(jù)

先別急著寫(xiě)，大家可以想下，搜索字段那里，比如我只想根據(jù)回款I(lǐng)D(cashId)查詢(xún)呢？
難道這樣發(fā)送請(qǐng)求？http://xxx.xxx.com/xxx/cash/l...""&cashId=xxx&custoName=""&cashType=""&cashStatus=""&userName=""&userMobile=""
真沒(méi)必要，我們想要的是這樣http://xxx.xxx.com/xxx/cash/l...
所以，請(qǐng)求之前，先寫(xiě)一個(gè)方法，就是過(guò)濾搜索字段（keyFrom）里面，值為空的屬性。

/**
 * 清除對(duì)象中值為空的屬性
 */
filterParams(obj){
    let _form = obj, _newPar = {}, testStr;
    //遍歷對(duì)象
    for (let key in _form) {
        testStr = null;
        //如果屬性的值不為空。
        //注意，不要這樣判斷if (_form[key])。因?yàn)橛行傩缘闹悼赡転?，到時(shí)候就會(huì)被過(guò)濾掉
        if (_form[key] !== null && _form[key] !== "") {
            //把值添加進(jìn)新對(duì)象里面
            _newPar[key]=_form[key].toString()
        }
    }
    //返回對(duì)象
    return _newPar;
}

3-1請(qǐng)求列表數(shù)據(jù)

   getList(){
        //過(guò)濾搜索字段值為空的屬性，然后對(duì)象合并，合并上頁(yè)碼。
        let _par = Object.assign(this.filterParams(this.keyFrom), {
            pageNo: this.currentPage,
            pageSize: this.pageSize
        });
        this.$http.get(http_url.list, {
            params: _par
        }).then(function (res) {
            
        });
    }

3-2寫(xiě)完之后，在mounted運(yùn)行這方法。

mounted(){
    this.getList();
},

為了能更直觀(guān)看到結(jié)果，我在瀏覽器直接打開(kāi)這個(gè)接口

需要的有的字段都有了
那么接下來(lái)就接收返回的字段

    getList(){
        //過(guò)濾搜索字段值為空的屬性，然后對(duì)象合并，合并上頁(yè)碼。
        let _par = Object.assign(this.filterParams(this.keyFrom), {
            pageNo: this.currentPage,
            pageSize: this.pageSize
        });
        this.$http.get(http_url.list, {
            params: _par
        }).then(function (res) {
            res=res.body;
            //如果請(qǐng)求成功了，這接口code為0代表請(qǐng)求成功。具體怎樣判斷還需要看接口
            if(res.code===0){
                 //設(shè)置列表數(shù)據(jù)
                 this.cashList = res.datas.entityList;
            }
            else{
                this.$message.error(res.msg);
            }
        });
    }

3-3在html頁(yè)面鋪數(shù)據(jù)

怎么鋪，隨機(jī)應(yīng)變唄！
來(lái)到el-table這個(gè)標(biāo)簽這里。不知道排版布局的話(huà)，參考上一篇文章喔！不要不知道我在說(shuō)什么！

然后開(kāi)始寫(xiě)

下面簡(jiǎn)單寫(xiě)幾個(gè)栗子

3-3-1回款id

點(diǎn)擊回款id,會(huì)出來(lái)詳情頁(yè)面（詳情頁(yè)面的方法getDetail我們到下面寫(xiě)，現(xiàn)在）

3-3-2訂單id

訂單id只需要顯示，就簡(jiǎn)單了

3-3-3回款時(shí)間

回款時(shí)間需要把時(shí)間戳轉(zhuǎn)成yyyy-mm-dd hh:mm:ss

3-3-4回款狀態(tài)

回款狀態(tài)需要把狀態(tài)碼轉(zhuǎn)換成文字

3-3-5回款金額

金額在數(shù)據(jù)庫(kù)以分為單位，現(xiàn)在需要轉(zhuǎn)換成元

3-3-6細(xì)節(jié)優(yōu)化

好了，典型的幾種數(shù)據(jù)，以及處理的方法，就是在這里了。當(dāng)然這個(gè)只是做展示作用，怎么展示是看項(xiàng)目的需求的！
小伙伴們運(yùn)行起來(lái)的時(shí)候，可能會(huì)發(fā)現(xiàn)兩個(gè)問(wèn)題。

1.比如網(wǎng)速比較慢的時(shí)候，請(qǐng)求沒(méi)完成的時(shí)候，就會(huì)看到這個(gè)（這個(gè)提醒是element-ui提供的，只要發(fā)現(xiàn)cashList是空的，就會(huì)出現(xiàn)這個(gè)提醒）

如果我們想體驗(yàn)好一點(diǎn)，做一個(gè)提示加載中的提示呢

這個(gè)簡(jiǎn)單的。首先在el-table上，設(shè)置v-loading="loading"。

然后在data設(shè)置loading這個(gè)屬性

然后就是在請(qǐng)求那里
進(jìn)入方法的時(shí)候，設(shè)置loading=true，請(qǐng)求完了再設(shè)置成false。（當(dāng)loading=true時(shí)，加載中的提示就會(huì)出現(xiàn)。

getList(){
    //顯示加載中提示
    this.loading=true;
    //過(guò)濾搜索字段值為空的屬性，然后對(duì)象合并，合并上頁(yè)碼。
    let _par = Object.assign(this.filterParams(this.keyFrom), {
        pageNo: this.currentPage,
        pageSize: this.pageSize
    });
    this.$http.get(http_url.list, {
        params: _par
    }).then(function (res) {
        res=res.body;
        //如果請(qǐng)求成功了，這接口code為0代表請(qǐng)求成功。具體怎樣判斷還需要看接口
        if(res.code===0){
             //設(shè)置列表數(shù)據(jù)
             this.cashList = res.datas.entityList;
             //關(guān)閉加載中提示
            this.loading=false;
        }
        else{
            this.$message.error(res.msg);
        }
    });
}

2.再有就是，如果展示的數(shù)據(jù)，有些是空的字符串，或者是null的話(huà)，在列表上就會(huì)看到。

這樣提示不太友好，因?yàn)橹伙@示空白一片，用的人可能不知道怎么回事。這時(shí)候加個(gè)判斷，如果某一個(gè)屬性的值，為空字符串或者null,就替換成‘--’。
getList(){

    //顯示加載中提示
    this.loading=true;
    //過(guò)濾搜索字段值為空的屬性，然后對(duì)象合并，合并上頁(yè)碼。
    let _par = Object.assign(this.filterParams(this.keyFrom), {
        pageNo: this.currentPage,
        pageSize: this.pageSize
    });
    this.$http.get(http_url.list, {
        params: _par
    }).then(function (res) {
        res=res.body;
        //如果請(qǐng)求成功了，這接口code為0代表請(qǐng)求成功。具體怎樣判斷還需要看接口
        if(res.code===0){
             //設(shè)置列表數(shù)據(jù)
             this.cashList = res.datas.entityList;
             this.cashList.map(function (value) {
                for (let key in value) {
                    //不要if(value[key])判斷，有的值可能是0，會(huì)把0過(guò)濾
                    if (value[key] === null || value[key] === "") {
                        value[key] = "--"
                    }
                }
            });
             //關(guān)閉加載中提示
            this.loading=false;
        }
        else{
            this.$message.error(res.msg);
        }
    });
}

然后我們就會(huì)看到這樣的結(jié)果，就明確的說(shuō)明了，這里的值為空

4.請(qǐng)求詳情數(shù)據(jù)

詳情的數(shù)據(jù)，就是點(diǎn)擊列表的任何一條數(shù)據(jù)，出來(lái)一個(gè)詳情頁(yè)面。

先在瀏覽器請(qǐng)求一下（看下有身什么字段，可以方便在html里面鋪數(shù)據(jù)），看到有很多字段。

詳情的html

現(xiàn)在項(xiàng)目上，用的是這個(gè)效果，我們現(xiàn)在也用這個(gè)吧！

代碼如下，castInfo是在data聲明的的變量，作用是儲(chǔ)存請(qǐng)求回來(lái)的字段，包含字段如上圖！



    
        X
        
            回款金額：{{(castInfo.cashAmount / 100).toFixed(2)}}元

            
                回款編號(hào)：{{castInfo.cashId}}|回款日期：{{new Date(castInfo.cashDate).toLocaleDateString().replace(///g, "-")
                }}
        
        
            
                回款狀態(tài)：待回款
                回款狀態(tài)：部分回款
                回款狀態(tài)：已取消
                回款狀態(tài)：已回款
            
            
        
        
            
                概要
            
            
        
        
            基本信息
            
                
                    回款編號(hào)
                    {{castInfo.cashId}}
                
                
                    回款金額
                    {{(castInfo.cashAmount / 100).toFixed(2)}}元
                
                
                    賬戶(hù)類(lèi)型
                    
                        {{castInfo.cashAccountType===1?"公賬":"其他賬戶(hù)"}}
                    
                    其他賬戶(hù)
                    --
                
                
                    回款類(lèi)型
                    立即回款
                    定期回款
                    --
                
                
                    回款日期
                    {{new Date(castInfo.cashDate).toLocaleDateString().replace(///g, "-") }}
                
                
                    回款狀態(tài)
                    待回款
                    部分回款
                    已回款
                    已取消
                    --
                
                
                    回款渠道
                    支付寶
                    微信支付
                    銀行轉(zhuǎn)賬
                    蘇寧易付寶
                    易極付
                    藍(lán)金靈支付
                    --
                
                
                    備注
                    {{castInfo.remark}}

遮罩層和詳情div里面的樣式我不說(shuō)了。最外層的樣式是下面這樣

{
    width: 700px;
    z-index: 1006;
    position: fixed;
    top: 0;
    right: 0;
    transform: translate3d(700px, 0, 0);
    height: 100%;
    background: #535968;
    transition: transform 1s;
}

transform: translate3d(700px, 0, 0);是為了一開(kāi)始吧它隱藏起來(lái)，相信大家都看得懂！怎么讓它顯示出來(lái)呢，把樣式改成transform: translate3d(0, 0, 0);這個(gè)就行了，動(dòng)畫(huà)效果自動(dòng)會(huì)有，因?yàn)榧恿?b>transition: transform 1s;。

請(qǐng)求詳情的方法

getDetali: function (id) {
    //contentShow控制詳情頁(yè)和遮罩層的顯示，contentClass控制詳情頁(yè)的動(dòng)畫(huà)，castInfo為記錄請(qǐng)求回來(lái)的數(shù)據(jù)。大家要在data上面聲明哦！
    //也是同樣的處理方式，區(qū)別就是this.$loading是element提供的全局組件，效果就是整個(gè)屏幕顯示加載中。
    let loadingContent = this.$loading({
        text: "正在加載中..."
    });
    //顯示詳情
    this.$http.get(http_url.detail, {
        params: {
            cashId: id
        }
    }).then(function (res) {
        res = res.body;
        if (res.code === 0) {
            this.castInfo = res.datas.castInfo;
            //關(guān)閉加載中提示
            loadingContent.close();
            //顯示詳情的div
            this.contentShow = true;
            //為了確保看到動(dòng)畫(huà)效果，所以讓遮罩層和詳情的DIV先顯示，再執(zhí)行this.contentClass = true;讓詳情DIV從右至左的出現(xiàn)
            setTimeout(() => {
                this.contentClass = true;
            })
        }
        else {
            this.$message.error(res.msg);
        }
    });
}

隱藏詳情

既然是詳情，又出現(xiàn)，就有隱藏

/**
 * @description 隱藏詳情
 */
hideContentDo(){
    //先執(zhí)行this.contentClass = false。讓詳情DIV從左至右回去，等回去了之后，再執(zhí)行this.contentShow = false;在隱藏div,否則會(huì)看不到動(dòng)畫(huà)效果。設(shè)置的時(shí)間，就是當(dāng)時(shí)動(dòng)畫(huà)的時(shí)間！transition: transform 1s
    this.contentClass = false;
    setTimeout(() => {
        this.contentShow = false;
    }, 1000)
},

5.分頁(yè)

分頁(yè)這個(gè)功能，大家可能都接觸過(guò)，寫(xiě)得也是很復(fù)雜。但是今天用了element-ui提供的分頁(yè)組件，就簡(jiǎn)單多了！

引入分頁(yè)組件

在.cash-table這個(gè)DIV下面，直接引入下面的代碼

handleCurrentChange這個(gè)方法待會(huì)寫(xiě)，allCount，pageSize，currentPage這三個(gè)變量，都是之前已經(jīng)聲明了的，大家往上翻下就知道了！參數(shù)大家看官網(wǎng)-分頁(yè)

編寫(xiě)分頁(yè)方法

/**
 * @description 分頁(yè)處理
 * @param val
 */
handleCurrentChange(val) {
    //val是組件的返回值，返回當(dāng)前是第幾頁(yè)
    //然后把值賦值給currentPage。
    this.currentPage = val;
    //然后再次調(diào)用getList。更新cashList
    this.getList();
}

這個(gè)的代碼看著很簡(jiǎn)單。大家可能會(huì)不太理解原理。下面我簡(jiǎn)單分析下。
1.首先執(zhí)行this.currentPage = val;獲取當(dāng)前是第幾頁(yè)，比如我點(diǎn)擊第二頁(yè)。this.currentPage的值就是2。
2.然后執(zhí)行this.getList();。這個(gè)時(shí)候，在方法里面。

相當(dāng)于發(fā)送了這個(gè)請(qǐng)求http://xxx.xxx.com/xxx/cash/l...
然后在執(zhí)行下去，cashList這個(gè)數(shù)組就更新了。我們分頁(yè)就開(kāi)發(fā)完了。

6.搜索功能

搜索功能這個(gè)太常見(jiàn)了，我現(xiàn)在做的項(xiàng)目，搜索需求就是。

然后輸入再點(diǎn)擊

交互很容易理解。就是輸入，然后再輸出結(jié)果，如上圖，我在回款I(lǐng)D下面的文本框輸入‘M2017070400060002’。然后點(diǎn)擊搜索。就會(huì)出現(xiàn)輸出結(jié)果。
下面，我們一步步來(lái)

6-1點(diǎn)擊，出現(xiàn)搜索框。 6-1-1，找到這個(gè)按鈕，在這個(gè)按鈕上綁定一個(gè)方法

6-1-2.編寫(xiě)filterSearch這個(gè)方法，代碼如下

/**
 * 顯示與隱藏搜索
 */
filterSearch(){
    //filterModel小伙伴們要在data上聲明哦，初始值為false。這個(gè)值是記錄當(dāng)前是不是要顯示搜索框，進(jìn)行搜索的。
    //當(dāng)前是否需要搜索狀態(tài)
    if (this.filterModel) {
        this.cashList.splice(0, 1);
    } else {
        this.cashList.unshift({
            "cashId": "#",
        })
    }
    //顯示或隱藏搜索
    this.filterModel = !this.filterModel;
}

6-1-3.列表的改造

首先，清楚一個(gè)。后端返回的數(shù)據(jù)（如上圖），并不是所有的字段都是可以進(jìn)行搜索的字段。只有這幾個(gè)字段（如下圖），才可以進(jìn)行搜索。

所以，這里我分三種請(qǐng)況。

一種情況是，比如回款編號(hào)，可以進(jìn)行搜索的字段。

    //修改前

    //修改后

第二種情況是，比如回款狀態(tài)，可以進(jìn)行搜索的字段。但是是下拉搜索的

    //修改前
    
        
    

    
    //修改后

另一種情況是，比如回款流水號(hào)，不可以進(jìn)行搜索的字段。修改情況是

    //修改前
    
        
    

    //修改后

6-1-4流程說(shuō)明

下面，我簡(jiǎn)單說(shuō)明下執(zhí)行的流程。
1.filterModel這個(gè)值，一開(kāi)始設(shè)為false。
2.點(diǎn)擊按鈕，執(zhí)行filterSearch，由于filterModel=false；所以最后執(zhí)行this.cashList.unshift({"cashId": "#"})。
3.this.cashList這個(gè)數(shù)組，前面就添加了{"cashId": "#"}。
點(diǎn)擊前

點(diǎn)擊后

4.this.cashList第一條就變成了{"cashId": "#"}，表格在遍歷到第一條的時(shí)候

el-table-column里面，由于**v-if**的關(guān)系。排版就改變了！這就是數(shù)據(jù)驅(qū)動(dòng)的魅力！
是搜索字段的第一行就變成了文本框

不是搜索字段的第一行就變成了空白的

5.交互就實(shí)現(xiàn)了！但是有一點(diǎn)要注意，就是搜索框v-model的值一定要綁定正確！

6-2實(shí)現(xiàn)搜索功能 6-2-1.首先，在每個(gè)按鈕里面，都綁定一個(gè)點(diǎn)擊事件，綁定search方法，用來(lái)啟動(dòng)搜索！

這個(gè)按鈕，大季家都知道是哪個(gè)吧！就是這里

6-2-2.然后，編寫(xiě)search方法

/**
 * 開(kāi)始搜索
 */
search(){
    this.getList();
},

沒(méi)看錯(cuò)，就是這一行，代碼，因?yàn)槊恳粋€(gè)文本框v-model了keyFrom相對(duì)應(yīng)的值。所以，只要在文本輸入，keyFrom對(duì)應(yīng)的值自動(dòng)改！然后執(zhí)行g(shù)etList，keyFrom中，只要不是空字符或者null。就不會(huì)被過(guò)濾！這樣就相當(dāng)于執(zhí)行http://xxx.xxx.com/xxx/cash/l...的請(qǐng)求。至于為什么要令寫(xiě)一個(gè)方法，不直接綁定getList呢，因?yàn)檫@里還要觸發(fā)下面的搜索標(biāo)簽。接下來(lái)會(huì)下面要說(shuō)的！

6-3實(shí)現(xiàn)重置搜索功能

看了搜搜索之后，我想大家都知道重置搜索怎么做了！就是先把keyFrom搜索的屬性的值清空，再執(zhí)行g(shù)etList。

/**
* @description 重置篩選條件
*/
resetSearch(){
    for (let key in this.keyFrom) {
        this.keyFrom[key] = null
    }
    this.getList();
}

7.搜索標(biāo)簽

搜索標(biāo)簽，在很多地方都會(huì)見(jiàn)到過(guò)，就是給用戶(hù)看到，執(zhí)行了什么條件的搜索。
下面就實(shí)現(xiàn)下這個(gè)功能！

7-1.編寫(xiě)方法

先實(shí)現(xiàn)，這個(gè)方法，這個(gè)方法，我想大家也已經(jīng)知道了，就是遍歷keyFrom，然后把屬性和值遍歷道一個(gè)數(shù)組里面，最后在html里面v-for循環(huán)一下！

7-2-1添加標(biāo)簽

    addTags(){
        //tagsArr就是存放篩選標(biāo)簽的數(shù)組，大家要在data里面設(shè)置哦，初始值為[];
        let _this = this,_label,_value;
        //用一個(gè)變量，獲取清空keyFrom里面值為空的屬性！
        let _params = Object.assign(this.filterParams(this.keyFrom);
        //用一個(gè)變量，獲取_params屬性的集合！
        let _paramKeys = Object.keys(_params);
        //先清空tagsArr,
        this.tagsArr = [];
        _paramKeys.forEach((val) => {
            //根據(jù)val,設(shè)置_label標(biāo)簽名
            swicth(val){
                case "cashId":_label="回款編號(hào)";break;
                case "ordId":_label="訂單編號(hào)";break;
                case "custoName":_label="客戶(hù)名稱(chēng)";break;
                case "cashType":_label="回款類(lèi)型";break;
                case "cashStatus":_label="回款狀態(tài)";break;
                case "userName":_label="采購(gòu)人";break;
                case "userMobile":_label="采購(gòu)人電話(huà)";break;
            }
            //然后上面有提到到，比如回款狀態(tài)，這個(gè)的值是下拉搜索的。傳過(guò)來(lái)的值是狀態(tài)碼，并不是文字。我們主要手動(dòng)把狀態(tài)碼轉(zhuǎn)譯成文字
            //比如狀態(tài)嗎是0，我們需要轉(zhuǎn)成‘待回款’
            //如果val等于cashStatus，就是回款狀態(tài)，我們需要轉(zhuǎn)譯
            if (_key === "cashStatus") {
                //判斷狀態(tài)碼
                switch (_keyFrom3[_key]) {
                    case "0":
                        _value = "待回款";
                        break;
                    case "1":
                        _value = "部分回款";
                        break;
                    case "2":
                        _value = "已回款";
                        break;
                    case "2":
                        _value = "已取消";
                        break;
                }
            }
            //tagsArr添加元素！
            //_value如果為真，就代表是把狀態(tài)碼轉(zhuǎn)成文字的，就添加_value，否則就直接添加_params[val]
            _this.tagsArr.push({
                key: val,
                label: _label,
                value: _value||_params[val]
            });
        });
    },

這個(gè)方法什么時(shí)候觸發(fā)呢，就是在搜索和重置搜索的時(shí)候觸發(fā) 。這也解釋了為什么搜索要令寫(xiě)一個(gè)方法！

search(){
   this.getList();
   this.addTags();
},
resetSearch(){
        for (let key in this.keyFrom) {
            this.keyFrom[key] = null
        }
        this.getList();
        this.addTags();
}

但是大家應(yīng)該還有注意到一個(gè)，就是比如‘回款狀態(tài)’，是下拉搜索的，所以，在下拉框，就要綁定search方法。

7-2-2html頁(yè)面遍歷

然后在html頁(yè)面遍歷這個(gè)tagsArr。

7-2-3刪除標(biāo)簽

眼尖的小伙伴又發(fā)現(xiàn)了，tagClose這個(gè)方法對(duì)吧！
接下來(lái)就實(shí)現(xiàn)這個(gè)！

tagClose(key, _index){
    //根據(jù)下標(biāo)，鼠標(biāo)tagsArr數(shù)組某一項(xiàng)
    this.tagsArr.splice(_index, 1);
    //根據(jù)key，把keyFrom某一項(xiàng)設(shè)為空值
    this.keyFrom[key] = null;
    //重新請(qǐng)求，更新cashList
    this.getList();
}

8.未完待續(xù)

好了，今天就到這里了，這篇文章也寫(xiě)了將近10個(gè)小時(shí)了！如果你有耐心讀到這里，你也是很有耐心的勇士！當(dāng)然，當(dāng)面的代碼和交互還是有細(xì)節(jié)是需要優(yōu)化的，這個(gè)就比較簡(jiǎn)單，小伙伴們，隨機(jī)應(yīng)變下就知道怎么做了！也寫(xiě)累了！不想說(shuō)太多了！下一篇文章，預(yù)熱就是利用監(jiān)聽(tīng)路由(vue-router)。來(lái)實(shí)現(xiàn)同一個(gè)頁(yè)面，不同狀態(tài)的處理。就比如：同樣是回款管理，我要求新建一個(gè)待回款的頁(yè)面，但是這個(gè)頁(yè)面只有待回款的數(shù)據(jù)?；乜顮顟B(tài)也不能修改！這個(gè)小伙伴們也可以試著做下，怎么實(shí)現(xiàn)。這個(gè)相對(duì)簡(jiǎn)單！

9.往期占坑

webpack+vue項(xiàng)目實(shí)戰(zhàn)（一,搭建運(yùn)行環(huán)境和相關(guān)配置）
webpack+vue項(xiàng)目實(shí)戰(zhàn)（二，開(kāi)發(fā)管理系統(tǒng)主頁(yè)面）
webpack+vue項(xiàng)目實(shí)戰(zhàn)（三，配置功能操作頁(yè)和組件的按需加載）

云服務(wù)器 GPU云服務(wù)器前端與后端的數(shù)據(jù)交互前端與后端的區(qū)別前端與后端的前景 js與后端的數(shù)據(jù)交互

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83864.html

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

登陸后可評(píng)論

0條評(píng)論

Yumenokanata

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#黑五#PacificRack：混合服務(wù)器終身3折月付$30起，VPS終身8折優(yōu)惠

閱讀 1487·2021-11-24 10:20
NQI一站式服務(wù)平臺(tái)建設(shè)，質(zhì)量基礎(chǔ)設(shè)施系統(tǒng)開(kāi)發(fā)方案

閱讀 3710·2021-11-24 09:38
2021 年 5 大軟件開(kāi)發(fā)趨勢(shì)

閱讀 2382·2021-09-27 13:37
云服務(wù)器跟云虛擬主機(jī)有什么不同-虛擬服務(wù)器和云主機(jī)哪個(gè)好？為什么？

閱讀 2291·2021-09-22 15:25
9月11日·上海 UCan技術(shù)開(kāi)放日-“構(gòu)建云原生，擁抱新增長(zhǎng)”交流會(huì)報(bào)名參會(huì)及預(yù)約直播入口

閱讀 2346·2021-09-01 18:33
React學(xué)習(xí)筆記1---起步

閱讀 3590·2019-08-30 15:55
2018年你應(yīng)該知道的11個(gè)Javascript實(shí)用程序庫(kù)

閱讀 1857·2019-08-30 15:54
調(diào)試DOM元素hover,focus,actived的樣式--谷歌瀏覽器調(diào)試器

閱讀 2175·2019-08-30 12:50

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

webpack+vue項(xiàng)目實(shí)戰(zhàn)（四，前端與后端的數(shù)據(jù)交互和前端展示數(shù)據(jù)）

回款金額：{{(castInfo.cashAmount / 100).toFixed(2)}}元

基本信息

相關(guān)文章

webpack+vue項(xiàng)目實(shí)戰(zhàn)（五，監(jiān)聽(tīng)路由，實(shí)現(xiàn)同個(gè)頁(yè)面不同狀態(tài)的切換）

2017-07-06 前端日?qǐng)?bào)

Vue.js 服務(wù)端渲染業(yè)務(wù)入門(mén)實(shí)踐

**記自己一次vue基礎(chǔ)實(shí)戰(zhàn)：配置篇**

**記自己一次vue基礎(chǔ)實(shí)戰(zhàn)：配置篇**

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

0條評(píng)論

Yumenokanata

男|高級(jí)講師

TA的文章

#黑五#PacificRack：混合服務(wù)器終身3折月付$30起，VPS終身8折優(yōu)惠

NQI一站式服務(wù)平臺(tái)建設(shè)，質(zhì)量基礎(chǔ)設(shè)施系統(tǒng)開(kāi)發(fā)方案

2021 年 5 大軟件開(kāi)發(fā)趨勢(shì)

云服務(wù)器跟云虛擬主機(jī)有什么不同-虛擬服務(wù)器和云主機(jī)哪個(gè)好？為什么？

9月11日·上海 UCan技術(shù)開(kāi)放日-“構(gòu)建云原生，擁抱新增長(zhǎng)”交流會(huì)報(bào)名參會(huì)及預(yù)約直播入口

React學(xué)習(xí)筆記1---起步

2018年你應(yīng)該知道的11個(gè)Javascript實(shí)用程序庫(kù)

調(diào)試DOM元素hover,focus,actived的樣式--谷歌瀏覽器調(diào)試器

最新活動(dòng)

回款編號(hào)	{{castInfo.cashId}}
回款金額	{{(castInfo.cashAmount / 100).toFixed(2)}}元
賬戶(hù)類(lèi)型	{{castInfo.cashAccountType===1?"公賬":"其他賬戶(hù)"}}	其他賬戶(hù)	--
回款類(lèi)型	立即回款	定期回款	--
回款日期	{{new Date(castInfo.cashDate).toLocaleDateString().replace(///g, "-") }}
回款狀態(tài)	待回款	部分回款	已回款	已取消	--
回款渠道	支付寶	微信支付	銀行轉(zhuǎn)賬	蘇寧易付寶	易極付	藍(lán)金靈支付	--
備注	{{castInfo.remark}}

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

webpack+vue項(xiàng)目實(shí)戰(zhàn)（四，前端與后端的數(shù)據(jù)交互和前端展示數(shù)據(jù)）

回款金額：{{(castInfo.cashAmount / 100).toFixed(2)}}元

基本信息

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！