Kaedah pelaksanaan paparan jadual dan penapisan data dalam UniApp

UniApp melaksanakan paparan jadual dan kaedah penapisan data

1 Pengenalan
UniApp ialah rangka kerja merentas platform yang menyokong pembangunan berbilang terminal Ia boleh dibangunkan menggunakan Vue.js dan menyokong kompilasi ke dalam iOS, Android, H5, dsb satu set kod Aplikasi pada pelbagai platform. Dalam pembangunan sebenar, adalah keperluan yang sangat biasa untuk memaparkan jadual dan dapat menapis data jadual. Artikel ini akan memperkenalkan cara melaksanakan paparan jadual dan penapisan data dalam UniApp, dan melampirkan contoh kod yang sepadan.

2. Paparan jadual
Untuk memaparkan jadual dalam UniApp, anda boleh menggunakan komponen <uni-list></uni-list> dan <uni-list-item></uni-list-item> untuk reka letak, dan gunakan atau <uni-cell></uni-cell> dan komponen lain untuk memaparkan pengepala jadual, gunakan <uni-cell-group> </uni-cell-group> dan <uni-cell></uni-cell> dan komponen lain untuk membentangkan kandungan jadual. Berikut ialah contoh paparan jadual ringkas: <uni-list></uni-list>和<uni-list-item></uni-list-item>组件进行布局，使用<uni-title></uni-title>或<uni-cell></uni-cell>等组件来呈现表头，使用<uni-cell-group></uni-cell-group>和<uni-cell></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-list-item>和<uni-cell-group></uni-cell-group>结合使用，实现了表格的布局，<uni-cell></uni-cell>用于呈现每个单元格的内容。通过循环渲染<uni-list-item></uni-list-item>，可以动态展示表格内容。

三、数据筛选
在表格展示中，通常需要对表格数据进行筛选，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，然后通过循环渲染filteredListrrreee

Dalam contoh di atas, <uni-list-item></uni-list-item> digunakan dalam kombinasi dengan kod>. Reka letak jadual dilaksanakan dan <uni-cell></uni-cell> digunakan untuk memaparkan kandungan setiap sel. Dengan memaparkan <uni-list-item></uni-list-item> secara kitaran, kandungan jadual boleh dipaparkan secara dinamik.

3. Penapisan data🎜Dalam paparan jadual, biasanya data jadual perlu ditapis UniApp menyediakan kaedah uni.filter, yang boleh digunakan untuk menapis data tatasusunan. Berikut ialah contoh penapisan data mudah: 🎜rrreee🎜Dalam contoh di atas, kata kunci yang dimasukkan oleh pengguna diperoleh melalui komponen uni-input, dan kemudian acara klik uni- butang diperolehi untuk menapis data. Dalam kaedah filterData, gunakan kaedah uni.filter untuk menapis list, tetapkan hasilnya kepada filteredList , dan kemudian Paparkan data yang ditapis secara dinamik dengan memaparkan filteredList dalam satu gelung. 🎜🎜Di atas ialah contoh ringkas paparan jadual dan penapisan data dalam UniApp. Anda boleh mengembangkan dan mengubah suai mengikut keperluan sebenar, seperti menambah lebih banyak syarat penapisan, melaksanakan pengisihan dan fungsi lain. Semoga artikel ini dapat membantu anda. 🎜

Atas ialah kandungan terperinci Kaedah pelaksanaan paparan jadual dan penapisan data dalam UniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!