Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen jadual

Dengan populariti pembangunan pemisahan bahagian hadapan dan belakang, rangka kerja dan alatan bahagian hadapan telah berkembang secara beransur-ansur menjadi sistem yang agak bebas, antaranya Vue.js, sebagai peneraju, telah menarik perhatian dan penggunaan lebih banyak dan lebih banyak pembangun. Artikel ini akan berdasarkan versi Vue.js 3.x dan memperkenalkan cara menggunakan pemalam Vue.js untuk merangkum komponen jadual.

Tentukan keperluan

Sebelum menggunakan Vue.js untuk merangkum komponen jadual, anda perlu terlebih dahulu menentukan keperluan dan fungsi komponen tersebut. Kami boleh menyenaraikan keperluan berikut:

• Sokong input dinamik data dan jana jadual berdasarkan data
• Sokong pengisihan lajur berdasarkan maklumat pengepala jadual
• Sokong fungsi carian , dan menapis data sasaran berdasarkan kata kunci
• Fungsi paging sokongan

Selepas menjelaskan keperluan dan fungsi, kami mula memasuki peringkat pembangunan formal.

Menulis pemalam Vue.js

Dalam Vue.js, pemalam ialah objek javascript dengan kaedah pemasangan. Apabila pemalam didaftarkan, kaedah pemasangan akan dipanggil Dalam kaedah ini, kami boleh melaksanakan komponen global, arahan, atau menambah kaedah contoh, dsb.

Kami menamakan pemalam VueTablePlugin, mari buat pemalam vue ini.

const VueTablePlugin = {
  install: function (Vue) {
    // 全局组件
    Vue.component('vue-table', {
      // 组件选项
    })
  }
}

Baiklah, sekarang kita telah mencipta pemalam vue, mari tambahkan pilihan komponen.

Menulis komponen jadual

Memandangkan komponen jadual perlu menyokong paparan data dinamik dan carian, pengisihan, halaman dan fungsi lain, kami perlu melakukan satu siri proses dalam komponen. Pertama, kita boleh menentukan beberapa pilihan dan prop komponen:

Vue.component('vue-table', {
  props: {
    data: Array,   // 父组件传入的数据
    columns: Array // table头部信息
  },
  data () {
    return {
      searchKey: '',   // 搜索关键字
      sortKey: '',     // 排序关键字
      current: 1,      // 当前页
      pageSize: 5,     // 每页显示数量
    }
  },
  computed: {
    filteredData: function () {
      return this.data.filter((row) => {
        return Object.values(row).some(val => {
          return String(val).includes(this.searchKey)
        })
      })
    },
    sortedData: function () {
      if (!this.sortKey) {
        return this.filteredData
      }
      return this.filteredData.sort((a, b) => {
        a = a[this.sortKey]
        b = b[this.sortKey]
        return a === b ? 0 : a > b ? 1 : -1
      })
    },
    pageCount: function () {
      return Math.ceil(this.filteredData.length / this.pageSize)
    },
    paginatedData: function () {
      const start = (this.current - 1) * this.pageSize
      return this.sortedData.slice(start, start + this.pageSize)
    }
  },
  methods: {
    sortBy (key) {
      this.sortKey = key
      this.current = 1
    },
    prevPage () {
      this.current--
      if (this.current < 1) this.current = 1
    },
    nextPage () {
      this.current++
      if (this.current > this.pageCount) this.current = this.pageCount
    }
  },
  template: `
    <table>
      <thead>
        <tr>
          <th v-for="col in columns"
              :key="col.key"
              @click="sortBy(col.key)"
              :class="{active: sortKey === col.key}">
            {{ col.name }}
          </th>
        </tr>
        <tr>
          <th v-for="col in columns">
            <input type="text" v-model="searchKey">
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in paginatedData" :key="row.id">
          <td v-for="col in columns" :key="col.key">
            {{ row[col.key] }}
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="100%">
            <button @click="prevPage">Prev</button>
            <button @click="nextPage">Next</button>
          </td>
        </tr>
      </tfoot>
    </table>
  `
})

Memandangkan kita menulis komponen jadual dalam pemalam, kita tidak perlu memperkenalkan sebarang komponen apabila menggunakan komponen ini ia ke mana-mana contoh vue Daftar pemalam untuk menggunakan komponen.

Gunakan komponen jadual

Selepas mencipta pemalam vue dan komponen jadual kami di atas, kami boleh menggunakan komponen ini dengan mudah dalam mana-mana contoh vue Operasi khusus adalah seperti berikut:

Perkenalkan vue-table-plugin ke dalam contoh vue yang menggunakan komponen ini:

import VueTablePlugin from './path/to/vue-table-plugin.js'

Kemudian daftarkan pemalam dalam contoh vue:

Vue.use(VueTablePlugin)

Dengan cara ini, anda boleh dengan mudah Menggunakan komponen jadual vue dengan berkesan:

<template>
  <div>
    <vue-table :data="tableData" :columns="columns"></vue-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John Doe', age: 29, occupation: 'Software Engineer' },
        { id: 2, name: 'Jane Doe', age: 30, occupation: 'Graphic Designer' },
        { id: 3, name: 'Aaron Lee', age: 25, occupation: 'Web Developer' },
        { id: 4, name: 'Amanda Smith', age: 27, occupation: 'UI Designer' },
        { id: 5, name: 'Jack Ma', age: 55, occupation: 'Entrepreneur' },
        { id: 6, name: 'Elon Musk', age: 49, occupation: 'Inventor' },
        { id: 7, name: 'Stephen Hawking', age: 76, occupation: 'Physicist' },
        { id: 8, name: 'Albert Einstein', age: 76, occupation: 'Theoretical Physicist' }
      ],
      columns: [
        { name: 'ID', key: 'id' },
        { name: 'Name', key: 'name' },
        { name: 'Age', key: 'age' },
        { name: 'Occupation', key: 'occupation' }
      ]
    }
  }
}
</script>

Dengan cara ini, kami telah melengkapkan pengkapsulan komponen jadual vue ringkas dan menggunakannya menggunakan pemalam vue. Dalam persekitaran pengeluaran sebenar, kami boleh mengoptimumkan dan mengembangkannya ke tahap tertentu dan membangunkan komponen jadual yang lebih fleksibel dan praktikal.

Ringkasan

Komponen pemalam dan jadual vue dalam artikel ini hanyalah pakej awal Dalam pembangunan sebenar, ia perlu disesuaikan dan dikembangkan mengikut keperluan untuk mencapai kesan akhir. Adalah disyorkan untuk berlatih dan mengembangkan dalam pembangunan sebenar, sentiasa menggilap perpustakaan komponen anda sendiri, dan meningkatkan keupayaan pembangunan anda sendiri.

Atas ialah kandungan terperinci Tutorial asas VUE3: Gunakan pemalam Vue.js untuk merangkum komponen jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!