建设领域行政处罚查询网站,比价网站怎么做,武安市网站建设费用,公众号平台入口效果#xff1a;
我们可以看到#xff0c;本来创建时间在创建人之上#xff0c;但经过我们搜索创建并进行匹配度排序后#xff0c;创建人的匹配度更高#xff0c;因此搜索之后#xff0c;创建人就会显示在创建时间之上。
当然如果100%匹配的同样会优先展示在最上面。 第… 效果
我们可以看到本来创建时间在创建人之上但经过我们搜索创建并进行匹配度排序后创建人的匹配度更高因此搜索之后创建人就会显示在创建时间之上。
当然如果100%匹配的同样会优先展示在最上面。 第一步 1加入模糊查询属性 filterable2 写入自定义模糊查询方法 :filter-method(v:any)filterTargetTable(v) 第二步 写过滤逻辑
// 过滤设置100%过滤优先展示
const filterTargetTable (v: any) {// 先对查询后匹配度高的进行排序targetTable.value.fields queryAndSort(v, targetTableCopy.value.fields);// 排序后过滤targetTable.value.fields targetTable.value.fields.filter((aa: any) {return aa.score ! -1;});
};
/*** 返回目标数组根据匹配度由高到低排序后的新数组* date 2024-1-16* param query:传入查询的内容* param arr:传入目标数组* return arr:排序后的新数组*/
const queryAndSort (query: string, data: any) {// 对数据源中每个元素进行匹配度计算并存入新数组matchesvar matches [];for (var i 0; i data.length; i) {var item data[i];// 判断当前项与查询字符串的匹配程度if (item.showLabel.includes(query)) {matches.push({ ...item, score: calculateScore(item.showLabel, query) });} else {matches.push({ ...item, score: -1 });}}// 根据匹配度降序排列结果matches.sort((a, b) b.score - a.score);return matches;
};
/*** 计算两个字符串之间的相似度分值* date 2024-1-16* param sourceStr:传入源字符串* param queryStr: 传入要查询的字符串* return 返回匹配度的分数*/
function calculateScore(sourceStr: any, queryStr: any) {var sourceLen sourceStr.length;var queryLen queryStr.length;var maxLen Math.max(sourceLen, queryLen);var count 0;for (var i 0; i sourceLen i queryLen; i) {if (sourceStr[i] queryStr[i]) {count;}}return (count / maxLen) * 100;
}这样就可以实现了。 里面只需要修改对应的参数即可。有问题评论区见哦~
