UniAppにおけるテーブル表示とデータフィルタリングの実装方法

UniApp によるテーブル表示とデータフィルタリングの実装方法

1. はじめに
UniApp は、マルチターミナル開発をサポートするクロスプラットフォーム フレームワークであり、Vue.js を使用して開発でき、一連の機能をサポートしています。 iOS、Android、H5、その他のプラットフォーム用のアプリケーションにコンパイルされます。実際の開発では、テーブルを表示し、テーブル データをフィルタできることが非常に一般的な要件です。この記事では、UniApp でテーブル表示とデータ フィルタリングを実装する方法を紹介し、対応するコード例を添付します。

2. テーブルの表示
UniApp でテーブルを表示するには、<uni-list> および <uni-list-item> を使用できます。レイアウト。ヘッダーをレンダリングするには、<uni-title> や <uni-cell> などのコンポーネントを使用します。<uni-cell-group> を使用します。 および <uni-cell> およびテーブルの内容を表示するその他のコンポーネント。以下は簡単なテーブル表示例です。

<template>
  <view>
    <uni-list>
      <uni-list-item>
        <uni-cell-group>
          <uni-cell title="姓名"></uni-cell>
          <uni-cell title="年龄"></uni-cell>
          <uni-cell title="性别"></uni-cell>
        </uni-cell-group>
      </uni-list-item>
      <uni-list-item v-for="(item, index) in list" :key="index">
        <uni-cell-group>
          <uni-cell title="{{item.name}}"></uni-cell>
          <uni-cell title="{{item.age}}"></uni-cell>
          <uni-cell title="{{item.gender}}"></uni-cell>
        </uni-cell-group>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ]
    }
  }
}
</script>

上記の例では、<uni-list-item> は <uni-cell-group># と結合されています。 ## テーブルのレイアウトを実装するために使用され、<uni-cell> は各セルの内容を表示するために使用されます。 rendering<uni-list-item>をループすることで、テーブルの内容を動的に表示することができます。

3. データ フィルタリング

テーブル表示では、通常、テーブル データをフィルタリングする必要があります。UniApp には、配列データのフィルタリングに使用できる
uni.filter メソッドが用意されています。以下は、単純なデータ フィルタリングの例です。

<template>
  <view>
    <uni-input v-model="keyword" placeholder="请输入关键词"></uni-input>
    <uni-button @click="filterData">查询</uni-button>
    <uni-list>
      <uni-list-item>
        <uni-cell-group>
          <uni-cell title="姓名"></uni-cell>
          <uni-cell title="年龄"></uni-cell>
          <uni-cell title="性别"></uni-cell>
        </uni-cell-group>
      </uni-list-item>
      <uni-list-item v-for="(item, index) in filteredList" :key="index">
        <uni-cell-group>
          <uni-cell title="{{item.name}}"></uni-cell>
          <uni-cell title="{{item.age}}"></uni-cell>
          <uni-cell title="{{item.gender}}"></uni-cell>
        </uni-cell-group>
      </uni-list-item>
    </uni-list>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '张三', age: 18, gender: '男' },
        { name: '李四', age: 20, gender: '女' },
        { name: '王五', age: 22, gender: '男' }
      ],
      keyword: '',
      filteredList: []
    }
  },
  methods: {
    filterData() {
      this.filteredList = uni.filter(this.list, (item) => {
        return item.name.includes(this.keyword)
      })
    }
  }
}
</script>

上記の例では、ユーザーが入力したキーワードは、

uni-input コンポーネントを通じて取得され、次に uni を通じて取得されます。 -button イベントをクリックしてデータをフィルタリングします。 filterData メソッドで、uni.filter メソッドを使用して list をフィルターし、結果を filteredList に割り当ててレンダリングします。ループfilteredList を介して、フィルターされたデータを動的に表示します。

上記は、UniApp でテーブル表示とデータ フィルタリングを実装する簡単な例です。フィルタ条件の追加、並べ替えやその他の機能の実装など、実際のニーズに応じて拡張および変更できます。この記事があなたのお役に立てば幸いです。

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