Cara untuk menetapkan jadual dalam Vue untuk berkembang lebih lama apabila kandungan meningkat

Sebagai salah satu rangka kerja popular dalam pembangunan bahagian hadapan, Vue.js sangat sesuai untuk mencipta aplikasi web yang dinamik dan interaktif dengan cepat. Antaranya, keperluan untuk memaparkan data dalam jadual adalah sangat biasa, tetapi cara membuat jadual lebih fleksibel apabila kandungan meningkat juga merupakan topik yang patut diterokai.

Dalam Vue.js, kita boleh menggunakan pelbagai cara untuk menetapkan jadual supaya berkembang lebih lama apabila kandungan meningkat, termasuk menggunakan gaya dinamik, menggunakan sifat yang dikira dan mendengar perubahan data. Seterusnya, artikel ini akan memperkenalkan secara terperinci kaedah pelaksanaan khusus dan senario penggunaan kaedah ini.

1. Gunakan gaya dinamik

Cara biasa untuk membuat jadual berkembang dengan kandungan ialah menggunakan gaya dinamik. Kaedah pelaksanaan khusus adalah untuk membungkus div kontena di luar jadual, dan kemudian menetapkan ketinggian div kontena dalam komponen Vue mengikut ketinggian jadual dan perubahan dalam kandungan, untuk mencapai kesan jadual yang semakin lama dengan kandungan.

Berikut ialah contoh mudah:

<template>
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "张三", age: 20, gender: "男" },
        { name: "李四", age: 22, gender: "女" },
        { name: "王五", age: 18, gender: "男" }
      ]
    };
  },
  mounted() {
    this.computeTableHeight();
  },
  methods: {
    computeTableHeight() {
      const table = document.querySelector(".table-wrapper table");
      const wrapper = document.querySelector(".table-wrapper");
      const height = table.clientHeight;
      wrapper.style.height = `${height}px`;
    }
  }
};
</script>

<style>
.table-wrapper {
  overflow-y: auto;
  max-height: 400px;
}
</style>

Dalam contoh di atas, kami membungkus bekas .table-wrapper di luar jadual dan menetapkan ketinggian maksimum bekas kepada 400px. Dalam fungsi cangkuk yang dipasang bagi komponen Vue, kami mengira ketinggian jadual dan menetapkan ketinggian bekas untuk menjadikan jadual bertambah panjang apabila kandungan meningkat.

Perlu diingat bahawa menggunakan kaedah ini perlu mengelakkan pengiraan yang berlebihan, jika tidak, ia boleh mengurangkan prestasi halaman.

2. Gunakan sifat yang dikira

Cara lain untuk menjadikan jadual berkembang dengan kandungan adalah dengan menggunakan sifat yang dikira. Kaedah ini biasanya sesuai untuk senario di mana data jadual sering berubah Dengan mengira ketinggian jadual secara dinamik, jadual boleh berkembang lebih lama dengan kandungan.

Berikut ialah contoh (dengan mengandaikan bahawa data dalam senarai akan berubah secara dinamik):

<template>
  <div class="table-wrapper" :style="{ height: tableHeight + 'px' }">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "张三", age: 20, gender: "男" },
        { name: "李四", age: 22, gender: "女" },
        { name: "王五", age: 18, gender: "男" }
      ]
    };
  },
  computed: {
    tableHeight() {
      const table = document.querySelector(".table-wrapper table");
      const height = table ? table.clientHeight : 0;
      return height;
    }
  }
};
</script>

<style>
.table-wrapper {
  overflow-y: auto;
  max-height: 400px;
}
</style>

Dalam contoh di atas, kami menggunakan atribut terkira tableHeight untuk mengira ketinggian secara dinamik jadual, dan kemudian Gunakan :style="{ height: tableHeight + 'px' }" dalam gaya div bekas untuk mengikat sifat yang dikira untuk menjadikan jadual berkembang dengan kandungan.

Perlu diambil perhatian bahawa apabila menggunakan kaedah ini, anda perlu memastikan bahawa jumlah pengiraan atribut yang dikira adalah munasabah untuk mengelakkan pengiraan berlebihan yang membawa kepada kemerosotan prestasi halaman.

3. Pantau perubahan data

Cara terakhir untuk memanjangkan jadual dengan kandungan ialah memantau perubahan data. Secara khusus, ia memantau perubahan dalam tatasusunan senarai, dan kemudian mengira semula ketinggian jadual apabila data berubah, supaya jadual menjadi lebih panjang apabila kandungan meningkat.

Berikut ialah contoh:

<template>
  <div class="table-wrapper" :style="{ height: tableHeight + 'px' }">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: "张三", age: 20, gender: "男" },
        { name: "李四", age: 22, gender: "女" },
        { name: "王五", age: 18, gender: "男" }
      ]
    };
  },
  computed: {
    tableHeight() {
      const table = document.querySelector(".table-wrapper table");
      const height = table ? table.clientHeight : 0;
      return height;
    }
  },
  watch: {
    list() {
      this.$nextTick(() => {
        this.computeTableHeight();
      });
    }
  },
  mounted() {
    this.computeTableHeight();
  },
  methods: {
    computeTableHeight() {
      const table = document.querySelector(".table-wrapper table");
      const wrapper = document.querySelector(".table-wrapper");
      const height = table.clientHeight;
      wrapper.style.height = `${height}px`;
    }
  }
};
</script>

<style>
.table-wrapper {
  overflow-y: auto;
  max-height: 400px;
}
</style>

Dalam contoh ini, kita mendengar perubahan dalam tatasusunan senarai, kemudian mengira semula ketinggian jadual apabila data berubah dan menetapkan ketinggian bekas untuk mencapai Kesan jadual semakin lama dengan kandungan.

Kelebihan kaedah ini adalah ianya agak mudah dan tidak memerlukan pengiraan yang terlalu banyak Walau bagaimanapun, perlu juga mengambil kira bahawa apabila jumlah data terlalu besar, ia akan memberi kesan tertentu prestasi.

Ringkasnya, di atas adalah tiga cara untuk memanjangkan jadual apabila kandungan meningkat. Kaedah manakah yang harus dipilih mengikut situasi dan keperluan sebenar. Tidak kira kaedah yang digunakan, tujuannya adalah untuk menjadikan halaman lebih fleksibel, mudah digunakan, cantik dan cekap.

Atas ialah kandungan terperinci Cara untuk menetapkan jadual dalam Vue untuk berkembang lebih lama apabila kandungan meningkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!