Kaedah pelaksanaan sel gabungan jadual dalam dokumen Vue

Vue ialah rangka kerja JavaScript popular yang menyediakan banyak ciri mudah untuk membina antara muka dinamik. Antaranya, jadual adalah elemen biasa dalam pembangunan web. Dalam sesetengah kes, kita mungkin perlu menggabungkan sel bersebelahan ke dalam satu sel untuk memaparkan maklumat dengan lebih baik. Artikel ini akan memperkenalkan cara melaksanakan penggabungan sel jadual dalam dokumen Vue.

Vue menyediakan komponen terbina dalam VueTable, yang boleh membuat jadual dengan mudah. Dalam komponen VueTable, jadual boleh ditakrifkan menggunakan bahasa penanda jadual HTML. Contohnya:

<table>
  <tbody>
    <tr>
      <td>A1</td>
      <td>A2</td>
      <td colspan="2">A3-A4</td>
    </tr>
    <tr>
      <td>B1</td>
      <td rowspan="2">B2-B3</td>
      <td>B4</td>
      <td>B5</td>
    </tr>
    <tr>
      <td>C1</td>
      <td colspan="2">C2-C3</td>
    </tr>
  </tbody>
</table>

Dalam contoh di atas, kami menggunakan atribut colspan dan rowspan untuk menggabungkan sel. Khususnya, colspan mewakili bilangan lajur yang hendak dicantumkan dan rowspan mewakili bilangan baris yang akan digabungkan. Sebagai contoh, dalam sel ketiga baris pertama, kita akan menggabungkan dua lajur sel, jadi tetapkan colspan="2".

Walaupun sel jadual boleh digabungkan menggunakan kaedah di atas, jika jadual itu sendiri dijana secara dinamik, kita mungkin perlu menggabungkan sel jadual secara dinamik. Pada masa ini kita boleh menggunakan sifat terkira yang disediakan oleh rangka kerja Vue untuk melengkapkan. Berikut ialah contoh:

<template>
  <table>
    <tbody>
      <tr v-for="(row, index) in rows" :key="index">
        <td v-for="(cell, index) in row" :key="index" 
          :colspan="getCellSpan(index, row)" 
          :rowspan="getRowSpan(index, index2, rows)">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      rows: [
        ["A1", "A2", "A3", "A4"],
        ["B1", "B2", "B3", "B4"],
        ["C1", "C2", "C3"]
      ]
    };
  },
  computed: {
    getCellSpan() {
      return function(index, row) {
        if (index === row.length - 1) {
          return 2;
        }
        return 1;
      };
    },
    getRowSpan() {
      return function(index, index2, rows) {
        if (index === 1 && index2 === 1) {
          return 2;
        }
        return 1;
      };
    }
  }
};
</script>

Dalam contoh di atas, kami menyimpan data jadual dalam pembolehubah baris. Kemudian, kami menggunakan fungsi yang terdiri daripada sifat terkira getCellSpan dan getRowSpan untuk melaksanakan penggabungan sel. Fungsi getCellSpan digunakan untuk mengira bilangan lajur yang hendak digabungkan, dan fungsi getRowSpan digunakan untuk mengira bilangan baris yang akan digabungkan.

Dalam aplikasi praktikal, kami boleh melaraskan pelaksanaan khusus atribut yang dikira mengikut situasi tertentu dan menggunakannya pada jadual yang dijana secara dinamik. Melalui kaedah di atas, kita boleh menggabungkan sel jadual Vue dengan mudah.

Atas ialah kandungan terperinci Kaedah pelaksanaan sel gabungan jadual dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!