Bagaimana untuk menyesuaikan jadual dalam vue

Vue ialah rangka kerja ringan yang digunakan secara meluas dalam pembangunan web. Dalam Vue, pembangun boleh menyesuaikan pelbagai komponen UI dengan mudah, seperti jadual, senarai, dsb. Artikel ini akan memperkenalkan cara menggunakan Vue untuk menyesuaikan jadual.

1. Idea asas jadual tersuai Vue

Idea asas jadual tersuai Vue ialah menggunakan ciri komponenisasi Vue untuk membahagikan jadual kepada komponen berasingan dan menggunakan data mengikat dan pemprosesan Acara untuk melaksanakan pemaparan data dan fungsi interaktif jadual.

2. Reka bentuk struktur jadual

Dalam Vue, reka bentuk struktur jadual tersuai adalah sangat fleksibel. Cara biasa ialah menggunakan struktur berikut:

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in items" v-bind:key="index">
        <td v-for="(value, key) in item">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

Dalam struktur ini, jadual terdiri daripada dua bahagian: pengepala dan badan. Pengepala terdiri daripada teg iklan dan teg ke-, dan nama lajur pengepala jadual dipaparkan berdasarkan nama kunci dalam data jadual. Badan jadual terdiri daripada teg tbody dan teg tr dan td Setiap baris dan lajur dalam data jadual diulang melalui arahan v-for. Dengan cara ini, kita boleh menggunakan templat asas di atas untuk menjana jadual secara automatik.

3. Idea untuk melaksanakan jadual dengan komponen Vue

Idea melaksanakan jadual dengan komponen Vue adalah untuk mengikat struktur dan data jadual menjadi komponen untuk melaksanakan gaya dan logik interaksi jadual.

1. Pemindahan data jadual

Dalam Vue, anda boleh menggunakan atribut props untuk menghantar data jadual kepada sub-komponen. Di sini, prop, data, pengiraan dan atribut lain biasanya digunakan untuk menetapkan data.

<script>
  export default {
    name: 'Table',
    props: {
      headers: Array,
      items: Array
    },
    data() {
      return {
        sortedHeaders: []
      }
    },
    computed: {
      sortedItems() {
        return this.sortBy([...this.items], [...this.sortedHeaders])
      }
    },
  }
</script>

Dalam coretan kod ini, kami mentakrifkan komponen Jadual dan menghantar pengepala dan sifat item jadual kepada subkomponen. Kemudian tatasusunan sortedHeaders ditakrifkan dalam komponen untuk menyimpan status pengisihan jadual, dan fungsi sortedItems() ditakrifkan dalam pengiraan. Fungsi ini menggunakan kaedah sortBy() untuk melaksanakan pengisihan dan mengembalikan data jadual yang diisih.

2. Logik pemaparan jadual

Penyampaian komponen biasanya menggunakan teg templat dan menggunakan arahan v-bind, v-on dan lain-lain untuk mengikat data dan peristiwa ke komponen.

<template>
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in headers"
            v-bind:key="header"
            v-on:click="sortTable(header)">
          {{ header }} {{ getSortIcon(header) }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in sortedItems" v-bind:key="index">
        <td v-for="(value, key) in item">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

Di sini, kami menggunakan arahan v-for untuk memaparkan setiap lajur jadual dan mentakrifkan fungsi sortTable() untuk melaksanakan fungsi pengisihan. Pada masa yang sama, kami juga menggunakan fungsi getSortIcon() untuk memaparkan ikon status pengisihan jadual.

3. Pemprosesan acara jadual

Akhir sekali, kita perlu melaksanakan logik pemprosesan acara jadual dalam komponen Vue. Arahan v-on dan fungsi pemprosesan acara biasanya digunakan di sini untuk melaksanakan pemprosesan berkaitan.

<script>
  export default {
    name: 'Table',
    props: {
      headers: Array,
      items: Array
    },
    data() {
      return {
        sortedHeaders: []
      }
    },
    computed: {
      sortedItems() {
        return this.sortBy([...this.items], [...this.sortedHeaders])
      }
    },
    methods: {
      sortTable(header) {
        if (this.sortedHeaders.includes(header)) {
          this.toggleSort(header)
        } else {
          this.sortedHeaders.push(header)
          this.doSort()
        }
      },
      toggleSort(header) {
        // 省略部分代码
      },
      doSort() {
        this.sortedItems.sort((a, b) => {
          // 省略部分代码
        })
      },
      getSortIcon(header) {
        // 省略部分代码
      },
    },
  }
</script>

Di sini, kami mentakrifkan empat fungsi pengendalian acara, sortTable(), toggleSort(), doSort() dan getSortIcon(), untuk melaksanakan fungsi pengisihan, pembalikan dan paparan ikon jadual.

Ringkasnya, proses menyesuaikan jadual menggunakan Vue adalah sangat fleksibel dan sangat disesuaikan. Melalui ciri komponenisasi dan pelaksanaan data dan pengikatan peristiwa, kami boleh melaksanakan gaya dan logik interaksi pelbagai jadual dengan cepat.

Atas ialah kandungan terperinci Bagaimana untuk menyesuaikan jadual dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!