vuejs:vue3:filter

Filter

  • レコードの一覧を絞り込む際に指定する、複雑な検索条件の設定を実装したい。
  • フィールド定義をもとに自動的に生成できるとよい。
  • 一旦設定した検索条件を保存し、再利用できるようにしたい。
  • 最上部に過去に設定した検索条件を呼び出すドロップダウン
  • デフォルトの検索条件があれば、初めから表示する
  • 検索条件ドロップダウン追加ボタンを設置し、フィールド選択により検索対象フィールドを指定しつつ設定行を追加表示
  • 設定行は選択されたフィールドに対し、指定可能な比較方法をドロップダウンで選択可能な状態にする
  • 比較方法を入力した後は、比較対象となるデータの入力フィールドを表示

フィールドデータ型と比較方法の組み合わせにおける表示内容

データ型 比較方法 入力コンポーネント 初期値 範囲・選択肢 説明
文字列 等価 テキスト入力
部分一致 テキスト入力
選択 ドロップダウン
数値 等価 テキスト入力(数値)
大小比較 テキスト入力(数値)
範囲 テキスト入力(数値)
日付 等価 テキスト入力(日付)
当日 検索実行時の日付を設定する
過去未来 テキスト入力(日付)
範囲 テキスト入力(日付) ≦ レコード値 < テキスト入力(日付)
当月 テキスト入力(数値) 1 1 - 31 検索実行時の当日を含む月を対象とする
テキストボックスに値がある場合はその日を開始日とする
当年 テキストボックス(日付) 4/1 検索実行時の当日を含む年を対象とする
テキストボックスに値がある場合はその月日を開始日とする
真偽値 等価 チェックボックス

  • vuejs/vue3/filter.txt
  • 最終更新: 2021/08/10 08:18
  • by admin