Vue支持搜索與篩選的用戶(hù)列表實(shí)現(xiàn)流程介紹

更新時(shí)間：2022年10月22日 16:29:34 作者：YinJie…

這篇文章主要介紹了Vue支持搜索與篩選的用戶(hù)列表實(shí)現(xiàn)流程，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

1. 常規(guī)風(fēng)格的示例工程開(kāi)發(fā)

首先新建一個(gè)名為 normal.html 的測(cè)試文件，在HTML文件的head標(biāo)簽中引入Vue框架并設(shè)置常規(guī)的模板字段如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .container {
            margin: 50px;
        }
        .content {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="Application"></div>
    <script>
        const App = Vue.createApp({
 
        })
        App.mount('#Application')
    </script>
</body>
</html>

為了方便邏輯的演示，我們先不添加樣式，先從邏輯上梳理這樣一個(gè)簡(jiǎn)單頁(yè)面應(yīng)用的開(kāi)發(fā)思路。

第一步，設(shè)計(jì)頁(yè)面的根組件的數(shù)據(jù)框架，分析頁(yè)面的功能需求，主要有三個(gè)：能夠渲染用戶(hù)列表、能夠根據(jù)輸入的關(guān)鍵字進(jìn)行檢索。因此，我們至少需要三個(gè)響應(yīng)式的數(shù)據(jù)：用戶(hù)列表數(shù)據(jù)、性別篩選字段和關(guān)鍵詞字段。

定義組件的data選項(xiàng)如下：

data() {
       return {
            //性別篩選字段
            sexFilter : -1,
            //展示的用戶(hù)列表數(shù)據(jù)
            showDatas : [],
            //搜索的關(guān)鍵詞
            sarchKey : ""
        }
}

上面定義的屬性中，sexFilter 字段的取值可以是 -1、0或1 。 -1表示全部，0表示性別男，1表示性別女。

第二步，思考頁(yè)面需要支持的行為，首先從網(wǎng)絡(luò)上請(qǐng)求用戶(hù)數(shù)據(jù)，將其渲染到頁(yè)面上（使用延時(shí)函數(shù)來(lái)模擬這一過(guò)程），要支持性別篩選功能，需要定義一個(gè)篩選函數(shù)來(lái)完成，同樣要實(shí)現(xiàn)關(guān)鍵詞檢索功能，也需要定義一個(gè)檢索函數(shù)。

定義組件的methods選項(xiàng)如下：

methods: {
        //獲取用戶(hù)數(shù)據(jù)
        queryAllData() {
             this.showDatas = mock
        },
        //進(jìn)行性別篩選
        filterData() {
             if(this.sexFilter == -1) {
                  this.showDatas = mock
             }else {
                  this.showDatas = mock.filter((data) => {
                       return data.sex == this.sexFilter
                   })
             }
         },
         //進(jìn)行關(guān)鍵詞檢索
         searchData() {
             if(this.searchKey.length == 0) {
                   this.showDatas = mock
             }else {
                   this.showDatas = mock.filter((data) => {
                       //名稱(chēng)中包含輸入的關(guān)鍵詞則表示匹配成功
                       return  data.name.indexOf(this.searchKey) != -1
                   })
             }
         }
}

對(duì)上面的代碼進(jìn)行匯總，mock變量是本地定義的模擬數(shù)據(jù)，方便我們測(cè)試效果，代碼如下：

let mock = [
            {
                name : "小王",
                sex : 0
            },
            {
                name : "小紅",
                sex : 1
            },
            {
                name : "小李",
                sex : 1
            },
            {
                name : "小張",
                sex : 0
            }
        ]

定義好了功能函數(shù)，我們需要在合適的時(shí)機(jī)對(duì)其進(jìn)行調(diào)用，queryAllData 方法可以在組件掛載時(shí)調(diào)用來(lái)獲取數(shù)據(jù)，當(dāng)頁(yè)面掛載后，延時(shí)3秒會(huì)獲取到測(cè)試的模擬數(shù)據(jù)，代碼如下：

mounted() {
        //模擬請(qǐng)求過(guò)程
        setTimeout(() => {
              this.queryAllData
        }, 3000);
},

對(duì)于性別篩選和關(guān)鍵詞檢索功能，可以監(jiān)聽(tīng)對(duì)應(yīng)的屬性，當(dāng)這些屬性發(fā)生變化時(shí)，進(jìn)行篩選或檢索行為。定義組件的watch選項(xiàng)如下：

watch: {
     sexFilter(oldValue,newValue) {
          this.filterData()
     },
     searchKey(oldValue,newValue) {
          this.searchData()
     }
}

至此，我們編寫(xiě)完成當(dāng)前頁(yè)面應(yīng)用的所有邏輯代碼。還有第三步需要做，將頁(yè)面渲染所需的HTML框架搭建完成，示例代碼如下：

<div id="Application">
        <div class="container">
            <div class="content">
                <input type="radio" :value="-1" v-model="sexFilter"/>全部
                <input type="radio" :value="0" v-model="sexFilter"/>男
                <input type="radio" :value="1" v-model="sexFilter"/>女
            </div>
            <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
            <div class="content">
                <table border="1" width="300px">
                    <tr>
                      <th>姓名</th>
                      <th>性別</th>
                    </tr>
                    <tr v-for="(data, index) in showDatas">
                      <td>{{data.name}}</td>
                      <td>{{data.sex == 0 ? '男' : '女'}}</td>
                    </tr>
                    </table>
            </div>
        </div>
    </div>

運(yùn)行代碼，可以看到一個(gè)支持篩選和檢索的用戶(hù)列表應(yīng)用以及完成了，效果如下圖所示：

2. 使用組合式API重構(gòu)用戶(hù)列表頁(yè)面

在上一節(jié)中我們實(shí)現(xiàn)了完整的用戶(hù)列表頁(yè)面。深入分析我們編寫(xiě)的代碼，可以發(fā)現(xiàn)需要關(guān)注的邏輯點(diǎn)十分分散，例如用戶(hù)的性別篩選是一個(gè)獨(dú)立的功能，要實(shí)現(xiàn)這樣一個(gè)功能，需要先在data選項(xiàng)中定義屬性，之后在methods選項(xiàng)中定義功能方法，最后在watch選項(xiàng)中監(jiān)聽(tīng)屬性，實(shí)現(xiàn)篩選功能。這些邏輯點(diǎn)的分離使得代碼的可讀性變差，并且隨著項(xiàng)目的迭代，頁(yè)面的功能可能會(huì)越來(lái)越復(fù)雜，對(duì)于后續(xù)此組建的維護(hù)者來(lái)說(shuō)，擴(kuò)展會(huì)變得更加困難。

Vue3提供的組合式API的開(kāi)發(fā)風(fēng)格可以很好的解決這個(gè)問(wèn)題，我們可以將邏輯都梳理在setup方法中，相同的邏輯點(diǎn)聚合性更強(qiáng)，更易閱讀和擴(kuò)展。

使用組合式API重寫(xiě)后的完整代碼如下：

let mock = [
            {
                name:"小王",
                sex:0
            },{
                name:"小紅",
                sex:1
            },{
                name:"小李",
                sex:1
            },{
                name:"小張",
                sex:0
            }
        ]
        const App = Vue.createApp({
            setup() {
                // 用戶(hù)列表
                const showDatas = Vue.ref([])
                const queryAllData = () => {
                    // 模擬請(qǐng)求過(guò)程
                    setTimeout(()=>{
                        showDatas.value = mock
                    }, 3000);
                }
                // 組件掛載是請(qǐng)求數(shù)據(jù)
                Vue.onMounted(queryAllData)
                let sexFilter = Vue.ref(-1)
                let searchKey = Vue.ref("")
                let filterData = () => {
                    if (sexFilter.value == -1) {
                        showDatas.value = mock
                    } else  {
                        showDatas.value = mock.filter((data)=>{
                            return data.sex == sexFilter.value
                        })
                    }
                }
                searchData = () =>  {
                    if (searchKey.value.length == 0) {
                        showDatas.value = mock
                    } else  {
                        showDatas.value = mock.filter((data)=>{
                            return data.name.search(searchKey.value) != -1 
                        })
                    }
                }
                // 添加偵聽(tīng)
                Vue.watch(sexFilter, filterData)
                Vue.watch(searchKey, searchData)
                return {
                    showDatas,
                    searchKey,
                    sexFilter
                }
            },
            template: `
            <div class="container">
                <div class="content">
                    <input type="radio" :value="-1" v-model="sexFilter"/>全部
                    <input type="radio" :value="0" v-model="sexFilter"/>男
                    <input type="radio" :value="1" v-model="sexFilter"/>女
                </div>
                <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
                <div class="content">
                    <table border="1" width="300px">
                        <tr>
                        <th>姓名</th>
                        <th>性別</th>
                        </tr>
                        <tr v-for="(data, index) in showDatas">
                        <td>{{data.name}}</td>
                        <td>{{data.sex == 0 ? '男' : '女'}}</td>
                        </tr>
                        </table>
                </div>
            </div>
            `
        })
        App.mount("#Application")

在使用組合式API編寫(xiě)代碼時(shí)，特別要注意，對(duì)于需要使用的響應(yīng)式數(shù)據(jù)，要使用 ref 方法或 reactive方法進(jìn)行包裝。

3. 優(yōu)化用戶(hù)列表頁(yè)面

在上一節(jié)中我們通過(guò)組合式API重寫(xiě)了用戶(hù)列表頁(yè)面，但是現(xiàn)在頁(yè)面篩選和搜索功能都比較生硬，在本節(jié)，我們嘗試給他添加一些動(dòng)畫(huà)效果。

首先要實(shí)現(xiàn)列表動(dòng)畫(huà)效果，需要對(duì)定義的組件模板結(jié)果做一下改動(dòng)，示例代碼如下：

template: `
            <div class="container">
                <div class="content">
                    <input type="radio" :value="-1" v-model="sexFliter"/>全部
                    <input type="radio" :value="0" v-model="sexFliter"/>男
                    <input type="radio" :value="1" v-model="sexFliter"/>女
                </div>
                <div class="content">搜索：<input type="text" v-model="searchKey" /></div>
                <div class="content">
                    <div class="tab" width="300px">
                        <div>
                        <div class="item">姓名</div>
                        <div class="item">性別</div>
                        </div>
                        <transition-group name="list">
                            <div v-for="(data, index) in showDatas" :key="data.name">
                            <div class="item">{{data.name}}</div>
                            <div class="item">{{data.sex == 0 ? '男' : '女'}}</div>
                            </div>
                        </transition-group>
                    </div>
                </div>
            </div>
            `

對(duì)應(yīng)的，定義CSS樣式與動(dòng)畫(huà)樣式如下：

        .container {
            margin: 50px;
        }
        .content {
            margin: 20px;
        }
        .tab {
            width: 300px;
            position: absolute;
        }
        .item {
            border: gray 1px solid;
            width: 148px;
            text-align: center;
            transition: all 0.8s ease;
            display: inline-block;
        }
        .list-enter-active {
            transition: all 1s ease;
        }
        .list-enter-from,
        .list-leave-to {
            opacity: 0;
        }
        .list-move {
            transition: transform 1s ease;
        }
        .list-leave-active {
            position: absolute;
            transition: all 1s ease;
        }

現(xiàn)在運(yùn)行代碼，可以看到當(dāng)對(duì)用戶(hù)列表進(jìn)行篩選、搜索時(shí)，列表的變化以及有了動(dòng)畫(huà)過(guò)渡效果：