Asas pembangunan VUE3: Gunakan pemalam Vue.js untuk merangkum komponen jadual data

Dalam pembangunan Vue3, jadual data ialah salah satu komponen paling asas dan biasa digunakan. Dalam pembangunan aplikasi sebenar, kita selalunya perlu memproses dan memaparkan sejumlah besar data. Komponen jadual data boleh melakukan pengisihan, pengisihan, penapisan dan operasi lain pada data mengikut format data untuk memenuhi keperluan paparan visualisasi data.

Sebagai rangka kerja bahagian hadapan yang popular, Vue.js sendiri menyediakan banyak komponen praktikal dan API. Walau bagaimanapun, apabila keperluan perniagaan terus meningkat, mungkin terdapat situasi di mana permintaan tidak dapat dipenuhi. Pada masa ini, kami boleh menggunakan mekanisme pemalam Vue.js untuk membangunkan beberapa komponen tersuai untuk mencapai keperluan perniagaan khas.

Di bawah, artikel ini akan memperkenalkan cara menggunakan mekanisme pemalam Vue.js untuk merangkum komponen jadual data dan melaksanakan fungsi berikut:

1. Memaparkan data dalam halaman
2. Isih data jadual
3. Tapis data jadual
4. Paparkan data dalam halaman

Untuk paparan jumlah data yang besar, memaparkan semua data sekali gus akan menyebabkan pemuatan halaman menjadi perlahan dan prestasi menurun. Oleh itu, kita perlu memaparkan data dalam halaman. Di sini kita boleh menggunakan pemalam Vue.js - "vuejs-paginate". Pemalam ini boleh memisahkan data tatasusunan mengikut parameter paging yang ditentukan, dan menyediakan paparan data dan fungsi penukaran halaman.

Selepas memasang pemalam "vuejs-paginate", kami perlu memulakannya. Konfigurasi khusus adalah seperti berikut:

import Vue from 'vue'
import Paginate from 'vuejs-paginate'

// 全局注册分页组件
Vue.component('paginate', Paginate);

// 分页参数配置
var options = {
  perPage: 10,
  perPageValues: [10, 20, 50],
  containerClass: 'pagination',
  infoClass: 'pagination__info',
  paginationClass: 'pagination__list',
  itemClass: 'pagination__item',
  linkClass: 'pagination__link'
}

// 定义分页组件
Vue.component('my-paginate', {
  components: {
    Paginate
  },
  props: {
    items: {
      type: Array, // 数据类型为数组
      required: true // 验证数据必传
    }
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      options: options // 分页参数
    }
  },
  computed: {
    // 分页处理后的数据
    paginatedItems() {
      var start = (this.currentPage - 1) * this.options.perPage;
      var end = start + this.options.perPage;
      return this.items.slice(start, end);
    }
  }
})

Dengan kod di atas, anda boleh menentukan komponen paging tersuai bernama "my-paginate" dan mendaftarkan pemalam "vuejs-paginate" secara global. Parameter yang diperlukan oleh komponen halaman ini ialah jenis tatasusunan data. Secara dalaman, ia menggunakan sifat yang dikira untuk menomborkan data tatasusunan dan bukannya memaparkan semua data sekaligus.

2. Isih data jadual

Untuk mengisih data dalam jadual, cara paling mudah ialah mengisih data tatasusunan dan kemudian memberikannya kepada jadual. Vue3 menyediakan fungsi - "dikira", yang boleh mengisih data, memantau perubahan data secara automatik dan memberikan semula.

Mari kita tentukan komponen yang boleh mengisih data jadual dan melaksanakan fungsi pensuisan tertib menaik dan menurun.

Vue.component('my-sorter', {
  props: {
    data: {
      type: Array,
      required: true
    },
    sortIndex: {
      type: Number, // 数字类型
      required: true
    }
  },
  data() {
    return { 
      direction: true // 排序切换方向
    }
  },
  computed: {
    sortedData() { // 数据排序处理
      var copyData = Object.assign([], this.data); // 浅拷贝数组
      var direction = this.direction ? 1 : -1; // 升序或降序
      copyData.sort(function(a, b) {
        if (a[this.sortIndex] < b[this.sortIndex]) return -1 * direction;
        if (a[this.sortIndex] > b[this.sortIndex]) return direction;
        return 0
      }.bind(this))
      return copyData;
    }
  },
  methods: {
    // 点击表头，切换排序方向
    toggle() {
      this.direction = !this.direction;
    }
  },
  template: `
    <th @click="toggle">
      {{ $slots.default[0].text }} 
      <i v-if="direction" class="glyphicon glyphicon-chevron-up"></i>
      <i v-else class="glyphicon glyphicon-chevron-down"></i>
    </th>
  `
})

3. Tapis data jadual

Kami boleh menambah kotak carian pada jadual untuk menapis data jadual berdasarkan kata kunci. Vue3 menyediakan fungsi yang sangat berguna untuk menapis data - "dikira".

Vue.component('my-filter', {
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      search: ''
    }
  },
  computed: {
    filteredData() {
      var searchKey = this.search.toLowerCase();
      return this.data.filter(item => {
        // 遍历数组内的每一项，如果包含搜索关键词，就保留这一项数据
        return Object.keys(item).some(key => {
          return String(item[key]).toLowerCase().indexOf(searchKey) > -1
        })
      })
    }
  },
  template: `
    <div>
      <input v-model="search" class="form-control" type="text" placeholder="搜索...">
      <table class="table table-bordered">
      <thead>
        <slot name="thead"></slot>
      </thead>
      <tbody>
        <tr v-for="item in filteredData">
          <slot name="tbody" :item="item"></slot>
        </tr>
      </tbody>
      </table>
    </div>
  `
})

Kod di atas ialah komponen penapis mudah. Melalui pengikatan dua hala fungsi pengiraan yang dikira dan model v, kata kunci input boleh ditapis dan kesan paparan jadual yang ditapis boleh dimuat semula dalam masa nyata.

Ringkasan:

Melalui contoh di atas, kami memberikan pengenalan ringkas tentang cara membangunkan pemalam Vue3 dan menggunakan mekanisme pemalam untuk merangkum komponen jadual data. Pada masa yang sama, kami juga menunjukkan cara melaksanakan fungsi pemprosesan data seperti kelui, pengisihan dan menapis data jadual melalui fungsi pengiraan yang dikira, pengikatan model v, slot, dsb. Kaedah pembangunan pemalam ini boleh menjadikan struktur kod kami lebih jelas dan komponen lebih boleh digunakan semula, dan ia juga memainkan peranan positif dalam penyelenggaraan dan peningkatan projek.

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