vue3+typescript实现查询功能
关键字查询是我们非常常见的一个功能,想要实现它并不复杂。它不仅可以通过后端接口来实现,也可以在前端中实现,接下来,我将介绍一下如何通过vue3+typescript实现查询功能。
原理:
通过typeScript中Array 中的filter()方法 和 String类型中的indexOf()方法来实现查询功能
// 查询函数
const onSubmit = () => {
let arr: ListInt[] = []; //定义数组,用来接受查询后需要展示的数据
//判断用户是否输入查询的关键字
if (data.selectData.title) {
//判断两个是否其中一个有值
arr = data.list.filter((value) => {
// 将过滤出来数组赋值给arr
return value.title.indexOf(data.selectData.title) !== -1; //indexOf()没有匹配到关键字则返回-1,区分大小写
});
} else {
arr = data.list;
}
//将查询结果赋值给data.list在页面中展示
data.list = arr;
在用户清除搜索框的内容,停止查询或者再次查询时,我们需要再次请求后端数据,进而保证查询正常进行。
//监听输入框中的内容
watch(
[() => data.selectData.title],
() => {
// 如果输入框中的内容为空,则再次请求数据
if (data.selectData.title === "") {
getGoodsList().then((res) => {
//将查询结果赋值给data.list
data.list = res.data;
});
}
}
);