Cara menggunakan Vue dan Element-UI untuk menavigasi dan menapis data

Cara menggunakan Vue dan Element-UI untuk melaksanakan navigasi dan penapisan data

Navigasi dan penapisan ialah salah satu fungsi biasa dalam aplikasi web, ia boleh memudahkan pengguna mencari maklumat yang mereka perlukan dengan cepat. Dengan sokongan kuat Vue dan Element-UI, kami boleh melaksanakan kedua-dua fungsi ini dengan mudah.

Artikel ini akan memperkenalkan cara menggunakan Vue dan Element-UI untuk melaksanakan navigasi dan penapisan data. Kami akan mengambil sistem pengurusan pelajar yang mudah sebagai contoh untuk menunjukkan cara memaparkan senarai pelajar dalam antara muka dan mengendalikannya melalui navigasi dan penapisan.

Pertama, kita perlu menyediakan beberapa data pelajar. Dalam contoh Vue, kita boleh menentukan tatasusunan yang dipanggil pelajar yang mengandungi maklumat tentang setiap pelajar. Setiap maklumat pelajar boleh termasuk atribut seperti ID, nama, umur, dsb.

Seterusnya, kita perlu memaparkan senarai pelajar pada antara muka. Kita boleh menggunakan komponen Jadual yang disediakan oleh Element-UI untuk mencapai ini. Dalam templat contoh Vue, kita boleh menggunakan teg el-table untuk mencipta jadual dan mentakrifkan setiap lajur jadual dengan menggunakan teg el-table-column. Kami boleh menggunakan tatasusunan pelajar sebagai sumber data jadual dan memaparkan ID, nama dan umur setiap pelajar dalam lajur jadual yang berbeza.

Atas dasar memaparkan senarai pelajar, kami boleh menambah fungsi navigasi. Vue dan Element-UI menyediakan komponen penomboran untuk membantu kami melaksanakan fungsi navigasi. Kita boleh menggunakan teg el-penomboran dalam templat untuk mencipta penomboran, menentukan jumlah bilangan item data dengan menetapkan jumlah atribut dan menentukan bilangan keping data yang dipaparkan pada setiap halaman dengan menetapkan atribut saiz halaman. Kami juga boleh mendapatkan nombor halaman yang pengguna klik pada penomboran dengan mendengar peristiwa perubahan semasa, dan kemudian mengemas kini data yang dipaparkan dengan mengira semula indeks permulaan dan indeks penamat senarai pelajar dalam contoh Vue.

Berdasarkan fungsi navigasi, kami boleh menambah lagi fungsi penapisan. Vue dan Element-UI menyediakan pelbagai komponen input untuk membantu kami melaksanakan fungsi penapisan. Kita boleh menggunakan teg el-input dalam templat untuk mencipta kotak input, dan mengikat nilai kotak input kepada sifat contoh Vue melalui arahan model-v. Kemudian, kita boleh menggunakan atribut yang dikira dalam tika Vue untuk menapis senarai pelajar yang memenuhi syarat dan mengemas kininya ke jadual yang dipaparkan sebagai sumber data.

Berikut ialah kod contoh lengkap:

<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>

Dalam kod sampel di atas, kami menentukan atribut bernama searchValue untuk menyimpan kata kunci carian yang dimasukkan oleh pengguna, dan menapis syarat berdasarkan searchValue dan currentPage melalui senarai atribut yang ditapis yang dikira. pelajar dan memaparkannya dalam jadual.

Melalui contoh ini, kita dapat melihat bahawa sangat mudah untuk menggunakan Vue dan Element-UI untuk menavigasi dan menapis data. Dengan hanya beberapa baris kod, anda boleh memberikan pengguna pengalaman interaktif yang baik dan membantu mereka mencari maklumat yang mereka perlukan dengan cepat. Harap artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan Vue dan Element-UI untuk menavigasi dan menapis data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!