Bagaimana untuk memaparkan nombor siri jadual dalam vue

Vue ialah rangka kerja JavaScript yang sangat popular yang digunakan secara meluas untuk membangunkan aplikasi web interaktif. Dalam Vue, kami biasanya menggunakan jadual untuk memaparkan data. Walau bagaimanapun, kadangkala kita perlu memaparkan nombor siri jadual untuk memudahkan pengguna memahami dan menganalisis data dalam jadual dengan lebih baik. Dalam artikel ini, kami akan memperkenalkan cara menggunakan Vue untuk memaparkan nombor siri jadual.

1. Tetapkan data jadual dalam Vue

Andaikan kita mempunyai jadual berikut, yang mengandungi nama, umur dan gred pelajar:

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(student, index) in students" :key="index">
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.score }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { name: '小明', age: 18, score: 90 },
        { name: '小红', age: 20, score: 80 },
        { name: '小刚', age: 19, score: 85 },
        { name: '小李', age: 21, score: 88 },
      ],
    };
  },
};
</script>

Perbandingan data jadual ini Mudah, kami menggunakan arahan v-for untuk melintasi tatasusunan students dan memaparkan maklumat setiap pelajar dalam jadual.

2. Tambahkan nombor siri jadual dalam Vue

Untuk memaparkan nombor siri dalam jadual, kita perlu menambah lajur tambahan untuk mewakili nombor siri baris semasa dalam meja. Kita boleh menggunakan kaedah map() dalam JavaScript untuk menambah atribut 序号 kepada setiap pelajar, dan kemudian memaparkan atribut dalam jadual.

<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(student, index) in studentsWithIndex" :key="index">
        <td>{{ student.index }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.score }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { name: '小明', age: 18, score: 90 },
        { name: '小红', age: 20, score: 80 },
        { name: '小刚', age: 19, score: 85 },
        { name: '小李', age: 21, score: 88 },
      ],
    };
  },
  computed: {
    studentsWithIndex() {
      return this.students.map((item, index) => ({
        index: index + 1,
        ...item,
      }));
    },
  },
};
</script>

Di sini, kami mencipta tatasusunan baharu studentsWithIndex dalam sifat pengiraan Vue (dikira). menambah atribut students untuk setiap pelajar dan menetapkan nilai atribut map() kepada nilai indeks yang dilalui tambah 1. Pada masa yang sama, kami juga menggunakan sintaks penstrukturan objek ES6 (students) untuk menggabungkan data pelajar asal dengan atribut index yang baru ditambah, dan akhirnya mengembalikan tatasusunan objek baharu. Dalam jadual, kami akan memaparkan atribut index yang baru ditambah, iaitu nombor siri pelajar dalam jadual. ...itemindex3. Tetapkan pengisihan jadual dalam Vue index

Dalam sesetengah kes, kita perlu mengisih data jadual berdasarkan atribut tertentu. Kami boleh menggunakan kaedah

JavaScript untuk mengisih data jadual dan mengemas kini nombor siri dalam jadual secara dinamik.

<template>
  <table>
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th @click="sortByScore">成绩</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(student, index) in studentsWithIndex" :key="index">
        <td>{{ student.index }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
        <td>{{ student.score }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { name: '小明', age: 18, score: 90 },
        { name: '小红', age: 20, score: 80 },
        { name: '小刚', age: 19, score: 85 },
        { name: '小李', age: 21, score: 88 },
      ],
    };
  },
  computed: {
    studentsWithIndex() {
      return this.students.map((item, index) => ({
        index: index + 1,
        ...item,
      }));
    },
  },
  methods: {
    sortByScore() {
      if (this.sortDirection === 'asc') {
        this.students.sort((a, b) => b.score - a.score);
        this.sortDirection = 'desc';
      } else {
        this.students.sort((a, b) => a.score - b.score);
        this.sortDirection = 'asc';
      }
      this.$forceUpdate();
    },
  },
  mounted() {
    this.sortDirection = 'asc'; // 默认升序排列
  },
};
</script>

Di sini, kami menambahkan pengepala jadual baharu dalam Vue, lajur gred dan menggunakan sort() untuk mendengar acara klik lajur ini. Pada masa yang sama, kami telah menambah kaedah

baharu pada kaedah Vue untuk mengisih data jadual. Apabila pengguna mengklik pada pengepala jadual, kami menggunakan kaedah

untuk mengisih tatasusunan @click dan mengemas kini nilai atribut sortByScore untuk menunjukkan kaedah pengisihan jadual semasa (tertib menaik atau menurun). Ambil perhatian bahawa kami menggunakan kaedah sort() dalam kaedah students untuk memaksa kemas kini tika Vue untuk mengemas kini nombor siri dalam jadual secara dinamik. sortDirectionsortByScoreRingkasnya, tidak sukar untuk memaparkan nombor siri jadual dalam Vue Kita boleh menggunakan sifat dan kaedah yang dikira yang disediakan oleh Vue untuk mencapainya. Melalui contoh di atas, saya percaya anda telah menguasai kaedah melaksanakan nombor siri jadual dalam Vue, dan berdasarkan ini, anda boleh mengembangkan lagi fungsi lain. $forceUpdate()

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