Vue と Element-UI を使用してデータをナビゲートおよびフィルターする方法

Vue と Element-UI を使用してデータ ナビゲーションとフィルタリングを実装する方法

ナビゲーションとフィルタリングは、Web アプリケーションの一般的な機能の 1 つであり、ユーザーが必要な情報を簡単にすばやく見つけることができます。 。 Vue と Element-UI の強力なサポートにより、これら 2 つの機能を簡単に実装できます。

この記事では、Vue と Element-UI を使用してデータ ナビゲーションとフィルターを実装する方法を紹介します。単純な学生管理システムを例として、インターフェースに学生のリストを表示し、ナビゲーションとフィルタリングを通じてそれを操作する方法を示します。

まず、生徒のデータを準備する必要があります。 Vue インスタンスでは、各生徒に関する情報を含むstudentsという配列を定義できます。各生徒の情報には、ID、名前、年齢などの属性を含めることができます。

次に、インターフェースに生徒リストを表示する必要があります。これを実現するには、Element-UI によって提供される Table コンポーネントを使用できます。 Vue インスタンスのテンプレートでは、el-table タグを使用してテーブルを作成し、el-table-column タグを使用してテーブルの各列を定義できます。 Students 配列をテーブルのデータ ソースとして使用し、各学生の ID、名前、年齢をテーブルのさまざまな列に表示できます。

学生リストの表示に基づいて、ナビゲーション機能を追加できます。 Vue と Element-UI は、ナビゲーション機能の実装に役立つページネーター コンポーネントを提供します。テンプレートの el-pagination タグを使用してページネータを作成し、total 属性を設定してデータ項目の総数を指定し、page-size 属性を設定して各ページに表示するデータの数を指定できます。また、current-change イベントをリッスンすることでユーザーがページネータ上でクリックしたページ番号を取得し、Vue インスタンスの学生リストの開始インデックスと終了インデックスを再計算して表示データを更新することもできます。

ナビゲーション機能をベースに、さらにフィルタリング機能を追加できます。 Vue と Element-UI は、フィルタリング機能の実装に役立つさまざまな入力コンポーネントを提供します。テンプレートで el-input タグを使用して入力ボックスを作成し、v-model ディレクティブを通じて入力ボックスの値を Vue インスタンスのプロパティにバインドできます。次に、Vue インスタンスの計算された属性を使用して、条件を満たす学生のリストをフィルターで除外し、それをデータ ソースとして表示されるテーブルに更新できます。

以下は完全なサンプル コードです:

<template>
  <div>
    <el-input v-model="searchValue" placeholder="请输入搜索关键字"></el-input>
    <el-table :data="filteredStudents" style="width: 100%">
      <el-table-column prop="id" label="学生ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :total="students.length"
      :page-size="pageSize"
      layout="prev, pager, next"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: '张三', age: 18 },
        { id: 2, name: '李四', age: 20 },
        { id: 3, name: '王五', age: 22 },
        // 更多学生数据...
      ],
      currentPage: 1,
      pageSize: 10,
      searchValue: ''
    };
  },
  computed: {
    filteredStudents() {
      let filtered = this.students;
      if (this.searchValue) {
        filtered = filtered.filter(student =>
          student.name.includes(this.searchValue)
        );
      }
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return filtered.slice(startIndex, endIndex);
    }
  },
  methods: {
    handlePageChange(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

上記のサンプル コードでは、計算プロパティ filteredStudents Filter out を通じて、ユーザーが入力した検索キーワードを保存する searchValue という名前のプロパティを定義します。 searchValue と currentPage に基づいて条件を満たす学生のリストをテーブルに表示します。

この例を通して、Vue と Element-UI を使用してデータをナビゲートしフィルターすることが非常に簡単であることがわかります。わずか数行のコードで、ユーザーに優れたインタラクティブなエクスペリエンスを提供し、必要な情報をすばやく見つけられるようにすることができます。この記事があなたのお役に立てば幸いです!

以上がVue と Element-UI を使用してデータをナビゲートおよびフィルターする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。