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

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

PHPz

リリース： 2023-07-06 19:13:40

オリジナル

2907 人が閲覧しました

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> 要素を作成し、<tr> 要素と <td> 要素を使用してテーブルの行と列をレンダリングできます。コード例は次のとおりです。

<template>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
    <tr v-for="item in dataList" :key="item.name">
      <td>{{ item.name }}</td>
      <td>{{ item.age }}</td>
      <td>{{ item.gender }}</td>
    </tr>
  </table>
</template>

ログイン後にコピー

2.3 データフィルタリング

データフィルタリング機能を実装するには、ページに入力ボックスとボタンを配置します。ユーザーが入力ボックスにフィルター条件を入力してボタンをクリックすると、ページはフィルター条件に基づいてデータ収集をフィルターし、テーブルを再レンダリングします。コード例は次のとおりです。

<template>
  <div>
    <input v-model="filterValue" type="text">
    <button @click="filterData">筛选</button>
  </div>
  <table>
    <!-- table rendering code... -->
  </table>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        // data list...
      ],
      filterValue: '' // filter input value
    }
  },
  methods: {
    filterData() {
      const filteredData = this.dataList.filter(item => {
        return item.name.includes(this.filterValue)
      })
      // update the data list with filtered data
      this.dataList = filteredData
    }
  }
}
</script>

ログイン後にコピー

2.4 データの動的な表示と更新

最後に、データ収集の更新関数を設定し、タイマーを使用してデータを定期的に更新できます。データ収集。このようにして、ページに表示されるデータは動的に変更できます。コード例は次のとおりです:

methods: {
  updateData() {
    setInterval(() => {
      // update data randomly
      this.dataList.forEach(item => {
        item.age = Math.floor(Math.random() * 50 + 20)
      })
    }, 5000) // update data every 5 seconds
  }
},
mounted() {
  this.updateData()
}

ログイン後にコピー

3. 概要

上記の設計と開発の実践を通じて、UniApp を使用してテーブル表示とデータフィルタリング機能を実装することに成功しました。同時にデータの動的な表示・更新も実装しました。この例を通じて、クロスプラットフォームアプリケーションを迅速かつ簡単に構築するのに役立つ UniApp の威力がわかります。この記事が UniApp の開発を理解する上で少しでも役立つことを願っています。

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