Vue でテーブルをグループ化およびマージするにはどうすればよいですか?

Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。一般的なアプリケーション シナリオの 1 つは、データの視覚化、特にテーブルです。データの量が多い場合、ユーザーがデータをよりよく理解して分析できるように、テーブルのグループ化と結合が非常に重要です。この記事では、Vueを使ってテーブルのグループ化や結合機能を実装する方法を紹介します。

まず、テーブル コンポーネントが必要です。 Vue の組み込みコンポーネント <table>、<tr>、<td> を使用して、基本的なテーブルを作成できます。このテーブルでは、通常の行と集計行の 2 種類の行を実装する必要があります。通常の行はデータの表示に使用され、集計行はグループ化された合計の表示に使用されます。

通常の行と集計行は、データの構造によって区別できます。生徒の成績を含む配列があるとします。各要素には生徒の名前、年齢、性別、学年が含まれます。この配列を主題ごとにグループ化し、各グループの合計スコアを計算できます。このデータ構造は、次の形式で表現できます。

{
  'Math': {
    'totalCount': 100,
    'students': [
      { 'name': 'Alice', 'age': 18, 'gender': 'female', 'score': 90 },
      { 'name': 'Bob', 'age': 19, 'gender': 'male', 'score': 10 }
    ]
  },
  'English': {
    'totalCount': 80,
    'students': [
      { 'name': 'Charlie', 'age': 20, 'gender': 'male', 'score': 50 },
      { 'name': 'David', 'age': 21, 'gender': 'male', 'score': 30 }
    ]
  }
}

このデータ構造では、各キーは主題を表し、生徒の情報を含むオブジェクトに対応します。このオブジェクトには、totalCount プロパティと students 配列が含まれています。 totalCount 属性はこの科目の合計スコアを表し、students 配列はこの科目の学生のリストを表します。

このデータ構造を取得したら、それを配列に変換してテーブルに表示できます。配列の各要素は行を表します。行は通常の行または要約行のいずれかになります。通常の行はその科目の学生リスト内の各学生に対応し、概要行はその科目の合計に対応します。この変換プロセスは、関数を使用して完了できます。

function convertData(data) {
  const result = []
  for (const subject in data) {
    const subjectData = data[subject]
    result.push({
      'type': 'group',
      'subject': subject,
      'totalCount': subjectData.totalCount
    })
    for (const student of subjectData.students) {
      result.push({
        'type': 'item',
        'name': student.name,
        'age': student.age,
        'gender': student.gender,
        'score': student.score
      })
    }
  }
  return result
}

この関数は、生徒のスコアを含むデータ オブジェクトを受け取り、テーブルの表示に使用される配列を返します。この配列の各要素には、type 属性とその他の列属性が含まれています。 type 属性は、この要素が通常の行であるか概要行であるかを示し、subject 属性は件名を示し、totalCount 属性は合計スコアを示します。科目、その他の属性は生徒の名前、年齢、性別、学年を示します。

データを取得したら、テーブル コンポーネントの作成を開始できます。テーブル コンポーネントは、テーブル データを含む配列を入力として受け入れ、データの type プロパティに基づいて通常の行と要約行をレンダリングする必要があります。

まず、テーブル ヘッダーをレンダリングする必要があります。ヘッダーにはすべての列のタイトルが含まれている必要があります。配列を使用してヘッダー列名を定義し、v-for バインディングを使用して各列のタイトルを個別にレンダリングできます。

<table>
  <thead>
    <tr>
      <th v-for="column in columns">{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
      <td v-for="(column, columnIndex) in columns" :key="columnIndex">
        <!-- 渲染单元格内容 -->
      </td>
    </tr>
  </tbody>
</table>

次に、データ行をレンダリングする必要があります。通常の行の場合は学生情報をレンダリングする必要があり、概要行の場合は科目名と合計スコアをレンダリングする必要があります。 v-if を使用すると、現在の行のタイプを判断し、そのタイプに基づいてさまざまなコンテンツをレンダリングできます。

<table>
  <thead>
    <tr>
      <th v-for="column in columns">{{ column }}</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
      <td v-for="(column, columnIndex) in columns" :key="columnIndex">
        <template v-if="column === 'subject' && row.type === 'group'">{{ row[column] }}</template>
        <template v-else-if="row.type === 'item'">{{ row[column] }}</template>
        <template v-else-if="column === 'totalCount' && row.type === 'group'">{{ row[column] }}</template>
        <template v-else></template>
      </td>
    </tr>
  </tbody>
</table>

最後に、データ配列をテーブルに必要な行と列の形式に変換する必要があります。 computed 属性を使用すると、入力データの変更を監視し、変更があった場合にテーブルの行と列の形式を更新できます。

computed: {
  columns() {
    const columns = ['name', 'age', 'gender', 'score']
    return ['subject', ...columns, 'totalCount']
  },
  rows() {
    const data = convertData(this.data)
    const rows = []
    let group = null
    for (const item of data) {
      if (item.type === 'group') {
        if (group) {
          rows.push(group)
        }
        group = {}
        for (const column of this.columns) {
          group[column] = item[column]
        }
      } else {
        const row = {}
        for (const column of this.columns) {
          row[column] = item[column]
        }
        rows.push(row)
      }
    }
    if (group) {
      rows.push(group)
    }
    return rows
  }
}

この computed 属性では、テーブルの列名を定義するために columns 配列が使用され、rows 配列が使用されますテーブルの行の内容を定義します。 rows 配列の初期化プロセス中に、入力データ配列を走査し、型に従って行オブジェクトに変換します。現在の行のタイプが group の場合、これは集計行であり、新しい集計行オブジェクトを作成する必要があることを意味します。タイプが item の場合、それは意味します。これは通常の行であり、新しい通常の行オブジェクトを作成する必要があることを示します。行オブジェクトを作成するときは、columns 配列で定義された列名を使用して、各要素の属性値を行オブジェクトの対応する列に割り当てます。最後に、すべての行オブジェクトを rows 配列に入れて返します。

このテーブル コンポーネントを使用すると、Vue を使用してテーブルのグループ化およびマージ機能を実装できます。生徒の成績を含むデータ オブジェクトをテーブル コンポーネントに渡し、コンポーネントに上記の関数を実装するだけです。表をレンダリングするとき、コンポーネントは隣接する通常の行を自動的にグループにマージし、グループの下に概要情報を表示します。

つまり、Vue を使用してテーブルのグループ化とマージ機能を実装するのは非常に簡単です。データをテーブルに適した形式に変換し、対応するレンダリング ロジックをテーブル コンポーネントに実装するだけです。この機能により、テーブルの使いやすさとユーザー エクスペリエンスが向上するだけでなく、ユーザーがデータをよりよく理解して分析できるようになります。

以上がVue でテーブルをグループ化およびマージするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。