テーブル表示とデータフィルタリングを実現するUniAppの設計・開発実践

UniApp は、Vue.js に基づいて開発されたクロスプラットフォーム アプリケーション フレームワークで、マルチターミナル アプリケーションを迅速に構築できます。この記事では、UniApp を使用してテーブル表示とデータ フィルタリングの設計と開発実践を実装する方法を紹介します。

1. 設計上のアイデア

テーブル表示とデータのフィルタリング機能を実装する前に、最初にいくつかの設計上のアイデアを明確にする必要があります。まず、データ コレクションを使用してデータをテーブルに保存し、ページに表示する必要があります。次に、ユーザーが自分のニーズに応じてデータをフィルタリングできるように、フィルタリング条件を設定する必要があります。最後に、ページ上のデータの動的な表示と更新を実装する必要があります。

2. 開発の実践

2.1 データの準備

まず、データ コレクションを準備する必要があります。データ コレクションは、複数のオブジェクトを含む配列にすることができます。各オブジェクトはデータ レコードを表し、複数のフィールドが含まれています。たとえば、次のようなデータ コレクションを使用できます。

dataList: [
  { name: '张三', age: 18, gender: '男' },
  { name: '李四', age: 20, gender: '男' },
  { name: '王五', age: 22, gender: '女' },
  // more data...
]

2.2 テーブル表示

次に、ページ上で v-for ディレクティブを使用して、データ コレクションを走査し、テーブルに表示します。 <table> 要素を作成し、<code><tr> 要素と <code><td> 要素を使用してテーブルの行と列をレンダリングできます。コード例は次のとおりです。 <pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;table&gt; &lt;tr&gt; &lt;th&gt;姓名&lt;/th&gt; &lt;th&gt;年龄&lt;/th&gt; &lt;th&gt;性别&lt;/th&gt; &lt;/tr&gt; &lt;tr v-for=&quot;item in dataList&quot; :key=&quot;item.name&quot;&gt; &lt;td&gt;{{ item.name }}&lt;/td&gt; &lt;td&gt;{{ item.age }}&lt;/td&gt; &lt;td&gt;{{ item.gender }}&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/template&gt;</pre><h3 id="データ-フィルタリング">2.3 データ フィルタリング</h3> <p>データ フィルタリング機能を実装するには、ページに入力ボックスとボタンを配置します。ユーザーが入力ボックスにフィルター条件を入力してボタンをクリックすると、ページはフィルター条件に基づいてデータ収集をフィルターし、テーブルを再レンダリングします。コード例は次のとおりです。 </p><pre class='brush:php;toolbar:false;'>&lt;template&gt; &lt;div&gt; &lt;input v-model=&quot;filterValue&quot; type=&quot;text&quot;&gt; &lt;button @click=&quot;filterData&quot;&gt;筛选&lt;/button&gt; &lt;/div&gt; &lt;table&gt; &lt;!-- table rendering code... --&gt; &lt;/table&gt; &lt;/template&gt; &lt;script&gt; export default { data() { return { dataList: [ // data list... ], filterValue: '' // filter input value } }, methods: { filterData() { const filteredData = this.dataList.filter(item =&gt; { return item.name.includes(this.filterValue) }) // update the data list with filtered data this.dataList = filteredData } } } &lt;/script&gt;</pre><h3 id="データの動的な表示と更新">2.4 データの動的な表示と更新</h3> <p>最後に、データ収集の更新関数を設定し、タイマーを使用してデータを定期的に更新できます。データ収集。このようにして、ページに表示されるデータは動的に変更できます。コード例は次のとおりです: </p><pre class='brush:php;toolbar:false;'>methods: { updateData() { setInterval(() =&gt; { // update data randomly this.dataList.forEach(item =&gt; { item.age = Math.floor(Math.random() * 50 + 20) }) }, 5000) // update data every 5 seconds } }, mounted() { this.updateData() }</pre><h2 id="概要">3. 概要</h2> <p>上記の設計と開発の実践を通じて、UniApp を使用してテーブル表示とデータ フィルタリング機能を実装することに成功しました。同時にデータの動的な表示・更新も実装しました。この例を通じて、クロスプラットフォーム アプリケーションを迅速かつ簡単に構築するのに役立つ UniApp の威力がわかります。この記事が UniApp の開発を理解する上で少しでも役立つことを願っています。 </p> </td>

以上がテーブル表示とデータフィルタリングを実現するUniAppの設計・開発実践の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。