vue 本地搜索 js实现本地数据搜索 el-select 模糊搜索

本是古典何须时尚 2022-12-30 14:56 223阅读 0赞

封装好的[添加链接描述][Link 1]

data

goodsTypeList:[],
    goodsTypeListCopy :[],

methods

focus: (val) => {
                    // 如果搜索没有数据 需要重新赋值
                    if (!this.productCodeList.length) {
                      this.productCodeList = this.productCodeListCopy;
                    }
                    //没选而且copy有值说明搜索过，下次打开只会显示之前搜索的 需要重新赋值初始数据
                    if (!this.addObject.logisticsProductId &&
                        this.productCodeListCopy.length) {
                        this.productCodeList = this.productCodeListCopy;
                    }
                  },
    
        productFilter(val) {
          if (!this.goodsTypeListCopy.length) {
            // 先拷贝一份 后续基于这里搜索
            this.goodsTypeListCopy = this.goodsTypeList;
          }
          if (!val) {
       //搜索框没传值就重新赋值
            this.goodsTypeList = this.goodsTypeListCopy;
            return;
          }
    
          this.goodsTypeList = [];
          this.goodsTypeListCopy.length &&
            this.goodsTypeListCopy.forEach((item) => {
              if (item.需要匹配的属性.indexOf(val) != -1) {
                this.goodsTypeList.push(item);//把匹配到的数据push
              }
            });
        },

组件

<el-select
                    style="width: 150px"
                    @focus="focus"
                    filterable
                    :filter-method="productFilter"
                    @change="ProductLineChange"
                    :disabled=" addObject.state == 1 || addObject.state == '' ? false : true "
                    size="mini"
                    v-model="addObject.shipLineId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in productLineLis"
                      :key="item.id"
                      :label="item.code"
                      :value="item.id"
                    ></el-option>
                  </el-select>

[Link 1]: https://blog.csdn.net/weixin_45345105/article/details/114117470