Vue3+typescriptでクエリ機能を実装

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;
      });
    }
  }
);