实现前端模糊查询效果

image.png

        <div class="header">
            <div class="search">
                <!--   下拉框            -->
                <a-select style="width: 120px" @change="handleChange">
                    <a-select-option v-for="(item,index) in criteria" :value="item" :key="index">
                        {{item}}
                    </a-select-option>
                </a-select>
                <!--     搜索框           -->
                <a-input-search placeholder="请输入搜索文字" enter-button @search="onSearch" style="width: 250px;"/>
            </div>
            <a-button type="primary" class="add-btn" @click="showDrawer">
                添加
            </a-button>

            <a-button type="" class="add-btn" @click="query" style="margin-right: 10px;">
                刷新
            </a-button>
        </div>

              //数据
              data:[],//总数据
                criteria: [
                    "name"
                ],
                criteriaActice: '',
                search: '',

            //方法
            handleChange(value) {
                console.log(`selected ${value}`);
                this.criteriaActice = value;
            },
            //搜索框
            onSearch(search_value) {
                console.log(search_value);
                let c = this.criteriaActice;
                if (!c) {
                    this.$message.error("请选择条件");
                    return;
                }
                let newData = this.data.filter((value) => {
                    return search_value.trim() == value[c] ? true : false;
                });
                this.data = newData;
            },

    .header {
        overflow: hidden;
        margin: 20px 0;
    }

    .add-btn {
        float: right;
    }

    .search {
        float: left;
    }

实验证明

这种方法可以达到模糊查询的效果，但是把搜索的字删了，数据也就没了，不能复原，应该要在另外一处开辟一个新变量，保存总的数据，再用一个变量来显示，就可以解决这个问题了。因为懒，所以我就没有写。