• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

我的博客我做主

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

vue3 通过fuse.js 实现前端模糊查询

在项目中写好多个查询组件,基于 element-plus el-select 组件:

举个栗子,SelectAllCompany.vue:

<template>
    <!-- 获取客户下拉数据,type 0 有限公司 -->
    <el-select v-model="current" :multiple="multiple" remote :remote-method="querySearch" :suffix-icon="loading ? '' :''" :loading="loading" loading-text="数据加载中..." filterable clearable placeholder="搜索客户名称/法人、负责人姓名/手机号" :style="{'width':width || '300px'}">
        <template #empty>
            <div style="font-size:14px;padding:30px">
                未找到相关客户信息,请前往 <el-button link type="primary" @click="router.push('/customer/index')">客户管理</el-button> 中添加
            </div>
        </template>
        <el-option
            v-for="option in options"
            :key="option.item.customerId"
            :label="option.item.name"
            :value="option.item[searchBy || 'customerId']">
        </el-option>
    </el-select>
</template>

<script setup>
import {getList as getAllCustomers} from "@/api/customer";
import Fuse from 'fuse.js'
const { proxy } = getCurrentInstance()
const props = defineProps(['value','searchBy','multiple','width'])
const emits = defineEmits(['update:value','selected'])
// 使用路由
const router = useRouter()
const fuse = ref(undefined); // 模糊查询插件
const list = ref([])
const loading = ref(false)
const options = ref([])
const current = computed({
  get: () => props.value,
  set: (val) => {
    emits('update:value', val)
  }
});
watch([()=>current.value, ()=>list.value],([newVal, newList])=>{
    if(!props.multiple){
        const selected = newList.find(z=>z[props.searchBy || 'customerId'] == newVal)
        emits('selected',selected)
        if(fuse.value){
            querySearch(newVal || '')
        }
    }else{
        const selected = newList.filter(z=>newVal.includes(z[props.searchBy || 'customerId']))
        emits('selected',selected)
    }
})
// 获取数据
const getList =(value)=>{
    const queryParams= {
        status: "0", // 正常
        checkStatus:"1", // 审核通过
        customerType: '0', //0 有限公司 1 个体户
        customerName:value // 搜索名字
    }
    loading.value = true
    getAllCustomers(queryParams).then(res=>{
        if (res.code = 200){
            list.value = res.data || []
            initFuse()
            querySearch(current.value || '')
        }else{
            proxy.$modal.msgError(res.msg || "请求发生错误,请稍后重试")
        }
    }).finally(()=>{
        loading.value = false
    })
}
// 初始化模糊查询插件
const initFuse =()=> {
    fuse.value = new Fuse(list.value, {
        shouldSort: true,
        threshold: 0.4, // 匹配算法阈值。阈值为0.0需要完全匹配(字母和位置),阈值为1.0将匹配任何内容。
        /**
         * 确定匹配与模糊位置(由位置指定)的距离。一个精确的字母匹配,即距离模糊位置很远的字符将被视为完全不匹配。
         *  距离为0要求匹配位于指定的准确位置,距离为1000则要求完全匹配位于使用阈值0.8找到的位置的800个字符以内。
         */
        location: 0,// 确定文本中预期找到的模式的大致位置。
        distance: 100,
        minMatchCharLength: 1,
        // 查询字段
        keys: ['customerId','customerName','legalName','legalPerson','legalTel']
    })
}
const querySearch =(query)=> {
  if (query !== '') {
    options.value = fuse.value.search(query)
  } else {
    options.value = []
  }
}
onMounted(()=>{
    getList()
})
</script>

<style>

</style>

作者:胡倩倩0903
出处:https://www.cnblogs.com/kitty-blog/
本文版权归作者和博客园共有,欢迎转载,但必须给出原文链接,并保留此段声明,否则保留追究法律责任的权利。

posted on 2023-05-08 15:23  kitty20180903suzhou  阅读(204)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3