前端实现下拉框和树节点模糊查询

在实际开发中，部分模糊查询可由前端来实现，以下介绍下拉框和树节点场景

第一步：安装pinyin-match

npm install pinyin-match --save

第二步：封装成公共方法

const PinyinMatch = require('pinyin-match/dist/main.js');

export function filterCommon(query: any, list: any, labelName = "label") {
  if (query) {
    return list.filter((item: any) => item[labelName] && (item[labelName].toLowerCase().indexOf(query.toLowerCase()) >= 0 || !!PinyinMatch.match(item[labelName], query)));
  } else {
    return list;
  }
}

第三步：在组件中使用

需配合filter-method使用，该方法会返回检索值

<el-select
    class="user-select"
    popper-class="user-select-popper select-popper-theme"
    v-model="userValue"
    filterable
    :filter-method="filterMethod"
    @change="handleUserChange">
    <el-option
      v-for="user in dataList"
      :key="user.value"
      :label="user.label"
      :value="user.value">
    </el-option>
</el-select>

//引入方法
import { filterCommon } from '@/utils/util';
const state = reactive<any>({
      dataList: [],       
      dataFilters: [],
});
 
//获取业务数据
    function getResearchList() {
      fetchResearcher().then((res: any) => {
        if(res && res.length) {
          state.dataList= res.map((item: any) => {
            return {
              label: item.dataValue,
              value: item.dataKey
            }
          });
        } else {
          state.dataList= [];
        }
        state.dataFilters= state.dataList;
      });
    }

    //模糊搜索
    function filterMethod(query: any) {
      state.dataList= filterCommon(query, state.dataFilters);
    }

以上是下拉框的实现方式，接下来介绍树节点的实现方式，使用方法一样

export function filterMethods(query: any, list: any, labelName = "label") {
  if (query) {
      const newarr:any = [];
      list.forEach((item:any) => {
        if (item[labelName] && (item[labelName].toLowerCase().indexOf(query.toLowerCase()) >= 0 || !!PinyinMatch.match(item[labelName], query))) {
          newarr.push(item);
        } else {
          if (item.children && item.children.length > 0) {
            const redata:any = filterMethods(query, item.children);
            const obj:any = {
              ...item,
              children: redata
            };
            if (redata && redata.length>0) {
              newarr.push(obj);
            }
          }
        }
      });
      return newarr;
  } else {
    return list;
  }
}