Cara menggunakan vue dan Element-plus untuk mencapai kesan pautan halaman dan carian

Cara menggunakan Vue dan Element-plus untuk mencapai kesan pautan halaman dan carian

Dalam pembangunan web moden, adalah keperluan yang sangat biasa untuk mencapai kesan pautan halaman dan carian. Vue dan Element-plus ialah dua rangka kerja dan perpustakaan yang digunakan secara meluas dalam pembangunan bahagian hadapan Ia menyediakan pelbagai komponen dan alatan yang boleh membantu kami mencapai fungsi ini dengan mudah. Artikel ini akan menggunakan contoh untuk menunjukkan cara menggunakan Vue dan Element-plus untuk mencapai kesan pautan halaman dan carian.

Pertama, kita perlu menyediakan senarai data ringkas, seperti tatasusunan yang mengandungi berbilang objek. Untuk mensimulasikan senario sebenar, kami menganggap bahawa setiap objek mempunyai atribut nama dan kami akan mencari mengikut nama. Pada masa yang sama, kita juga perlu mempertimbangkan fungsi paging, iaitu setiap halaman memaparkan jumlah data tertentu, dan pengguna boleh melihat lebih banyak data dengan membelek halaman.

Dalam bahagian HTML, kami akan menggunakan komponen yang disediakan oleh Element-plus untuk melaksanakan fungsi paging dan carian. Pertama, kita memerlukan kotak input dan butang untuk mencari Kotak input terikat pada searchText dan fungsi carian dicetuskan apabila butang diklik. Kedua, kami juga memerlukan komponen halaman, termasuk nombor halaman dan butang membelok halaman. Kami akan mengikat nombor halaman semasa pada currentPage pembolehubah dan mencetuskan fungsi untuk melompat ke halaman apabila butang pusing halaman diklik. searchText，按钮点击后触发一个搜索函数。其次，我们还需要一个分页组件，包括页码和翻页按钮。我们将绑定当前页码到一个变量 currentPage 上，并在翻页按钮点击时触发一个跳转页面的函数。

<template>
  <div>
    <input v-model="searchText" placeholder="请输入搜索内容" />
    <el-button type="primary" @click="search">搜索</el-button>
    <div v-for="item in displayedItems" :key="item.id">{{ item.name }}</div>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="total"
    ></el-pagination>
  </div>
</template>

接下来，我们在 JavaScript 部分定义相关的逻辑和数据。首先，我们将数据数组 items 定义在 Vue 实例的 data 属性中。然后，我们定义一个计算属性 displayedItems，它会根据当前页码和搜索内容来返回对应的数据。同时，我们还要维护一个 total 变量表示总数据量，用于计算分页逻辑。

<script>
import { reactive } from 'vue'

export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' },
        // ...
      ],
      searchText: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
    }
  },
  computed: {
    displayedItems() {
      return this.items.filter(item => item.name.includes(this.searchText))
        .slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  methods: {
    search() {
      // 根据搜索内容重新计算分页和数据
      this.currentPage = 1
    },
    handlePageChange(currentPage) {
      // 更新当前页码
      this.currentPage = currentPage
    }
  }
}
</script>

为了使代码正常运行，我们还需要在这个文件中导入并注册 Element-plus 的组件。在 Vue 3 中，可以使用 import { ElButton, ElInput, ElPagination } from 'element-plus' 来导入相关组件，然后在 componentsrrreee

Seterusnya, kami mentakrifkan logik dan data yang berkaitan dalam bahagian JavaScript. Mula-mula, kami mentakrifkan tatasusunan data item dalam atribut data bagi tika Vue. Kemudian, kami mentakrifkan harta terkira displayedItems, yang akan mengembalikan data yang sepadan berdasarkan nombor halaman semasa dan kandungan carian. Pada masa yang sama, kita juga perlu mengekalkan pembolehubah total untuk mewakili jumlah keseluruhan data, yang digunakan untuk mengira logik halaman.

rrreee

Untuk kod berjalan seperti biasa, kami juga perlu mengimport dan mendaftarkan komponen Element-plus dalam fail ini. Dalam Vue 3, anda boleh menggunakan import { ElButton, ElInput, ElPagination } daripada 'element-plus' untuk mengimport komponen yang berkaitan, dan kemudian mendaftarkannya dalam atribut components. Jika anda menggunakan versi Vue 2, kaedah import dan pendaftaran adalah berbeza sedikit, sila laraskan mengikut situasi khusus anda.

Akhir sekali, buat aplikasi Vue dalam fail kemasukan dan lekapkannya pada halaman.

Pada ketika ini, kami telah menyelesaikan penggunaan Vue dan Element-plus untuk mencapai kesan pautan halaman dan carian. Pengguna boleh mencari data yang memenuhi syarat melalui kotak input dan menyemak imbas lebih banyak data melalui komponen halaman. Contoh ini hanyalah demonstrasi mudah, anda boleh mengembangkan dan mengoptimumkan fungsi mengikut keperluan sebenar. 🎜🎜Ringkasan: Menggunakan komponen dan alatan yang disediakan oleh Vue dan Element-plus, kami boleh mencapai kesan pautan halaman dan carian dengan mudah. Dengan mengikat data dan peristiwa, digabungkan dengan sifat dan kaedah yang dikira, kami boleh mengendalikan input pengguna dan lompatan halaman dengan mudah, serta melaksanakan interaksi data antara komponen yang berbeza. Semoga contoh dalam artikel ini akan membantu anda lebih memahami dan mengaplikasikan teknik ini. Jika anda ingin mengetahui lebih lanjut tentang fungsi dan penggunaan Vue dan Element-plus, sila rujuk dokumentasi rasmi dan tutorial berkaitan. 🎜

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk mencapai kesan pautan halaman dan carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!