Cara menggunakan Vue untuk melaksanakan kesan pengepala tetap

Cara menggunakan Vue untuk melaksanakan kesan pengepala jadual tetap

Dalam membangunkan aplikasi web, kita sering menghadapi situasi di mana kita perlu membetulkan pengepala jadual dalam jadual. Pengepala jadual tetap membolehkan pengguna melihat maklumat pengepala dengan mudah apabila kandungan jadual panjang, meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan pengepala tetap dan melampirkan contoh kod khusus untuk rujukan.

1. Buat projek Vue dan perkenalkan kebergantungan yang diperlukan

Pertama, kita perlu mencipta projek Vue dan memperkenalkan kebergantungan yang diperlukan. Jalankan arahan berikut dalam baris arahan untuk mencipta projek Vue baharu:

vue create fixed-table-header

Kemudian, masukkan direktori projek dan pasang elemen-ui sebagai rangka kerja UI kami:

cd fixed-table-header
npm install element-ui

2. Buat komponen jadual

Buat dalam src direktori Direktori Komponen dan cipta fail .vue bernama FixedTableHeader di dalamnya. Kod untuk menulis komponen jadual dalam fail ini adalah seperti berikut:

<template>
  <div class="fixed-table-header">
    <el-table
      :data="tableData"
      style="width: 100%"
      header-row-class-name="header-row"
      row-class-name="table-row"
      :header-cell-style="fixedHeaderStyle"
    >
      <el-table-column
        prop="name"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
      ></el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          name: "张三",
          age: 20,
          gender: "男"
        },
        {
          name: "李四",
          age: 22,
          gender: "女"
        },
        // 更多数据...
      ]
    };
  },
  computed: {
    fixedHeaderStyle() {
      const headerHeight = 40; // 表头高度
      return `height: ${headerHeight}px; line-height: ${headerHeight}px;`;
    }
  }
};
</script>

<style scoped>
.fixed-table-header {
  width: 100%;
  height: 300px;
  overflow-y: scroll;
}

table .header-row {
  position: sticky;
  top: 0;
  z-index: 1;
}

table .table-row {
  background-color: #f9f9f9;
}

.el-table__header-wrapper {
  overflow: hidden;
}
</style>

Dalam kod di atas, kami menggunakan komponen el-table elemen-ui untuk memaparkan data jadual. Untuk mencapai kesan pengepala jadual tetap, kami menentukan kelas gaya .header-row dan .table-row untuk atribut header-row-class-name dan row-class-name bagi jadual, dan menggunakan atribut melekit CSS ke Atas jadual.

Kami juga menggunakan sifat yang dikira untuk menetapkan gaya pengepala jadual secara dinamik Objek dikembalikan melalui sifat yang dikira fixedHeaderStyle. Sifat gaya objek ditetapkan kepada ketinggian pengepala jadual yang tetap pengepala ditetapkan melalui gaya CSS.

3. Gunakan komponen jadual dalam App.vue

Dalam fail App.vue dalam direktori src, gunakan komponen jadual FixedTableHeader yang baru dibuat seperti berikut:

<template>
  <div id="app">
    <FixedTableHeader />
  </div>
</template>

<script>
import FixedTableHeader from "./components/FixedTableHeader.vue";

export default {
  name: "App",
  components: {
    FixedTableHeader
  }
};
</script>

<style>
#app {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

4. Jalankan projek dan lihat kesannya

npm run serve

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan pengepala tetap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!