Vue 模糊查询（按字段）-蒲公英云

Vue 模糊查询（按字段）

你的名字 2021-09-07 09:44 786阅读 0赞

根据人家的代码，对应改成自己的需要的功能
原参考地址：https://blog.csdn.net/zuorishu/article/details/86630097

<!-- 设备分组 -->
<template>
    <view class="content">
        <view class="search">
            <!--用了一个uview的u-search的小组件-->
            <u-search placeholder="搜索" shape="square" :show-action="true" bg-color="#fff" v-model="search"></u-search>
        </view>
        <view>
            <view class="grouping" v-for="(item,index) in items">
                <image src="../../../../static/img/home/grouping-icon.png" mode=""></image>
                <view class="grouping-nav-tit">
                    <view class="grouping-nav">{
   {item.station_name}}</view>
                    <view class="grouping-nav" style="font-size: 16px;">{
   {item.station_address}}</view>
                </view>
                <view class="grouping-nav-btn">
                    <view class="button">照片</view>
                    <view class="button">位置</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    export default { 
        data() { 
            return { 
                search: '',
                groupinglist: []
            }
        },
        onLoad() { 
            this.getStationListByRelate()
        },
        computed: { 
            getStationListByRelate() { 
                this.$http.get('JiekouMing', { 
                    canshu: 35
                }).then(res => { 
                    this.groupinglist = res.data.data;
                    console.log(this.groupinglist)
                })
            },
            items: function() { 
                var _search = this.search;
                if (_search) { 
                    //不区分大小写处理
                    var reg = new RegExp(_search,'name')
                    //es6 filter过滤匹配，有则返回当前，无则返回所有
                    return this.groupinglist.filter(function(e) { 
                        //匹配某个字段
                         return e.station_name.match(reg);
                    })
                };
                console.log(this.groupinglist)
                return this.groupinglist;
            }
        }
    }
</script>
<style> page { 
        background-color: #f5f5f5;
    }
    .content { 
        width: 90%;
        margin-left: 5%;
    }
    .search { 
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5%;
    }
    .grouping { 
        margin-top: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 80px;
        background-color: #fff;
        box-shadow: 2px 2px 1px #ccc;
        border-radius: 2px;
    }
    .grouping image { 
        margin-left: 10px;
        width: 50px;
        height: 50px;
    }
    .grouping-nav-tit { 
        width: 65%;
    }
    .grouping-nav { 
        width: 100%;
        padding-left: 10px;
        font-size: 18px;
        line-height: 25px;
        overflow: hidden;
        /*超出部分隐藏*/
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
        white-space: nowrap;
        /*规定段落中的文本不进行换行 */
    }
    .grouping-nav-btn { 
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 20%;
        /* height: 60px; */
    }
    .button { 
        margin-top: 10px;
        width: 50px;
        height: 23px;
        border-radius: 5px;
        text-align: center;
        line-height: 23px;
        background-color: #2E95FF;
        color: #FFFFFF;
    }
</style>