vueでテーブルのシリアル番号を表示する方法

Vue は、インタラクティブな Web アプリケーションの開発に広く使用されている、非常に人気のある JavaScript フレームワークです。 Vue では通常、データを表示するためにテーブルを使用します。ただし、ユーザーがテーブル内のデータをよりよく理解して分析できるように、テーブルのシリアル番号を表示する必要がある場合があります。今回はVueを使ってテーブルのシリアル番号を表示する方法を紹介します。

1. Vue でテーブル データを設定する

生徒の名前、年齢、学年が含まれる次のテーブルがあるとします:

<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>

このテーブルのデータ比較 単純に、 v-for 命令を使用して students 配列を走査し、テーブルに各生徒の情報を表示します。

2. Vue にテーブルのシリアル番号を追加します

テーブルにシリアル番号を表示するには、テーブルの現在の行のシリアル番号を表す列を追加する必要があります。テーブル。 JavaScript の map() メソッドを使用して、各生徒に serialnumber 属性を追加し、この属性をテーブルに表示できます。

<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>

ここでは、Vue の計算プロパティ (計算済み) に新しい配列 studentsWithIndex を作成します。この配列は、元の students 配列に基づいています。変換後、 students 配列を map() メソッドで取得し、各生徒に index 属性を追加し、index 属性を設定します。値が設定されます。現在走査されているインデックス値に 1 を加えたもの。同時に、ES6 オブジェクト分割構文 (...item) を使用して、元の生徒データを新しく追加された index 属性とマージし、最終的に新しいオブジェクトを返しました。配列。表には、新しく追加された index 属性が表示されます。これは、表内の生徒のシリアル番号です。

3. Vue でテーブルの並べ替えを設定する

場合によっては、特定の属性に基づいてテーブル データを並べ替える必要があります。 JavaScript の sort() メソッドを使用してテーブル データを並べ替え、テーブル内のシリアル番号を動的に更新できます。

<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>

ここでは、Vue に新しいヘッダー、つまりスコア列を追加し、@click を使用してこの列のクリック イベントをリッスンしました。同時に、テーブル データを並べ替えるための新しい sortByScore メソッドを Vue メソッドに追加しました。ユーザーがテーブルのヘッダーをクリックすると、sort() メソッドを使用して students 配列を並べ替え、sortDirection 属性の値を更新して、現在のテーブルの並べ替え方法 (昇順または降順)。 sortByScore メソッドで $forceUpdate() メソッドを使用して Vue インスタンスの更新を強制し、テーブル内のシリアル番号を動的に更新したことに注意してください。

要約すると、Vue でテーブルのシリアル番号を表示するのは難しくなく、Vue が提供する計算プロパティとメソッドを使用してこれを実現できます。上記の例を通じて、Vue でテーブルのシリアル番号を実装する方法をマスターできたと思います。これを基に、さらに他の機能を拡張することができます。

以上がvueでテーブルのシリアル番号を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。