细聊Vue列表中的那些事——数据查询

开发中免不得会用到搜索功能，移动端是类似于图一的这种形式，WEB端是类似图二的这种形式，但思路都是大同小异的。
今天就来聊聊图二这种形式（Vue版带历史记录的即时搜索输入框）的实现思路，也作为日常总结之需。

图一.jpg

图二.png

思路：
1.先创建1个input框，一个filter列表，一个history列表（模板）；

<div>
       <!-- 实时搜索输入框 -->
       <input v-model="filterText" type="span" placeholder="人员姓名,人员状态"></input>
       <!-- 匹配到的数据列表 -->
       <div class="cu-card">
           <div v-for="(item, index) in filterList" :key="index">
               <div class="content">
                   <span>姓名：</span>
                   <span>{{item.name}}</span>
               </div>
               <div class="content">
                   <span>状态：</span>
                   <span>{{item.status}}</span>
               </div>
           </div>
       </div>
       <!-- 历史记录列表 -->
       <div class="hisText" v-show="showHistory">
           <h3>历史记录</h3>
           <ul>
               <li v-for="(item,index) in historyList" :key="index">
                   <span>{{item}}</span>
               </li>
           </ul>
       </div>
   </div>

//注入模拟数据
data() {
            return {
                filterText: '',
                list: [{
                    name: '小花',
                    status: '优秀'
                }, {
                    name: '小明',
                    status: '良好'
                }, {
                    name: '小陈',
                    status: '较差'
                }],
                showHistory: true,
                historyList: []
            }
        },

2.再用computed的filterList（）对原始list做过滤计算，再返回这个filterList列表；

computed: {
            /**
             * 数据过滤函数
             */
            filterList() {
                let arr = []
                console.log(this.filterText)
                //不存在需查询关键字，则直接返回新数组
                this.list.forEach((item) => arr.push(item))
                //存在需查询关键字，则返回过滤后的新数组
                if (this.filterText) {
                    //关键语句
                    arr = this.list.filter(item => item.name.includes(this.filterText) || item.status.includes(this.filterText))
                }
                console.log(arr)
                return arr
            },

3.使用watch实时监听filterText值，做去重unique（）和缓存localStorage.setItem（）操作，并返回这个历史记录。

watch: {
            /**
             * filterText监听函数
             */
            filterText(newval, oldval) {
                if (newval !== '') {
                    //新值不为空，则收起历史记录板
                    this.showHistory = false
                    if (newval.length > oldval.length) {
                        //用户增加输入值长度时才插值到历史记录
                        this.historyList.push(newval)
                        //插值后进行去重
                        this.historyList = this.unique(this.historyList)
                        let parsed = JSON.stringify(this.historyList);
                        console.log(parsed, newval.length, oldval.length)
                        //将JSON对象转换成为JSON字符串输入
                        localStorage.setItem('historyList', parsed);
                    } else {
                        return false
                    }
                } else {
                    //新值为空，则展开历史记录板
                    this.showHistory = true
                }
            }
        }

4.最后记得在mounted()时就要获取之前的历史记录

mounted() {
            if (localStorage.getItem('historyList')) {
                //将JSON字符串转换成为JSON对象输出
                this.historyList = JSON.parse(localStorage.historyList)
                console.log(this.historyList)
            }
        },

效果如图.png

最后编辑于：2020.08.23 01:24:49