效果：

我们可以看到，本来创建时间在创建人之上，但经过我们搜索创建并进行匹配度排序后，创建人的匹配度更高，因此搜索之后，创建人就会显示在创建时间之上。

当然如果100%匹配的同样会优先展示在最上面。

第一步：

 （1）加入模糊查询属性 filterable（2） 写入自定义模糊查询方法 :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;
}

 这样就可以实现了。 

 里面只需要修改对应的参数即可。有问题评论区见哦~