Vue est un framework JavaScript populaire pour créer des applications Web modernes. Un scénario d'application courant est la visualisation de données, en particulier les tableaux. Lorsque la quantité de données est importante, le regroupement et la fusion de tableaux sont très importants pour aider les utilisateurs à mieux comprendre et analyser les données. Cet article expliquera comment utiliser Vue pour implémenter la fonction de regroupement et de fusion de tables.
Tout d'abord, nous avons besoin d'un composant table. Nous pouvons utiliser les composants intégrés de Vue <table>, <tr>, <td> pour créer une table de base. Dans ce tableau, nous devons implémenter deux types de lignes : les lignes normales et les lignes récapitulatives. Les lignes normales sont utilisées pour afficher les données, tandis que les lignes récapitulatives sont utilisées pour afficher les totaux groupés. <table>、<tr>、<td> 来创建一个基本的表格。在这个表格中，我们需要实现两种类型的行：普通行和汇总行。普通行用于显示数据，而汇总行用于显示分组的总计。
普通行和汇总行可以通过数据的结构来区分。假设我们有一个包含学生成绩的数组，每个元素都包含学生的姓名、年龄、性别和成绩。我们可以将这个数组按照学科分组，并计算每个分组的总分。这个数据结构可以表示为如下形式：
{
'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
rrreee
Dans cette structure de données, chaque clé représente un sujet et correspond à un objet contenant des informations sur l'élève. Cet objet contient une propriététotalCount et un tableau students. L'attribut totalCount représente le score total de cette matière, et le tableau students représente la liste des étudiants dans cette matière. Après avoir cette structure de données, nous pouvons la convertir en un tableau à afficher dans le tableau. Chaque élément du tableau représente une ligne, qui peut être une ligne ordinaire ou une ligne récapitulative. La ligne normale correspond à chaque élève de la liste des élèves de la matière, et la ligne récapitulative correspond au total de la matière. Ce processus de conversion peut être complété à l'aide d'une fonction : #🎜🎜#rrreee#🎜🎜#Cette fonction accepte un objet de données contenant les notes des étudiants et renvoie un tableau utilisé pour afficher le tableau. Dans ce tableau, chaque élément contient un attribut type et d'autres attributs de colonne. L'attribut type indique si cet élément est une ligne ordinaire ou une ligne récapitulative, l'attribut subject indique le nom du sujet, l'attribut totalCount indique le le score total du sujet et d'autres attributs indiquent le nom, l'âge, le sexe et les notes de l'étudiant. #🎜🎜##🎜🎜#Après avoir obtenu les données, nous pouvons commencer à écrire le composant table. Le composant table doit accepter un tableau contenant des données de table en entrée et afficher les lignes normales et récapitulatives en fonction de l'attribut type des données. #🎜🎜##🎜🎜#Tout d'abord, nous devons restituer l'en-tête du tableau. L'en-tête doit contenir les titres de toutes les colonnes. Nous pouvons utiliser un tableau pour définir les noms des colonnes d'en-tête et utiliser la liaison v-for pour afficher le titre de chaque colonne séparément. #🎜🎜#rrreee#🎜🎜#Ensuite, nous devons restituer les lignes de données. Pour les lignes ordinaires, nous devons afficher les informations sur les étudiants ; pour les lignes récapitulatives, nous devons afficher les noms des sujets et les scores totaux. Nous pouvons utiliser v-if pour déterminer le type de la ligne actuelle et restituer un contenu différent en fonction du type. #🎜🎜#rrreee#🎜🎜#Enfin, nous devons convertir le tableau de données au format de ligne et de colonne requis par le tableau. Nous pouvons utiliser l'attribut calculed pour surveiller les modifications des données d'entrée et mettre à jour le format de ligne et de colonne du tableau lorsqu'il change. #🎜🎜#rrreee#🎜🎜#Dans cet attribut calculé, le tableau columns est utilisé pour définir les noms de colonnes de la table, et les lignes code> tableau est utilisé pour définir le contenu des lignes de la table. Pendant le processus d'initialisation du tableau <code>rows, nous parcourons le tableau de données d'entrée et le convertissons en objets ligne selon le type. Si le type de la ligne actuelle est group, cela signifie qu'il s'agit d'une ligne récapitulative, et nous devons créer un nouvel objet de ligne récapitulative si le type est item, cela signifie qu'il s'agit d'une ligne ordinaire, nous devons créer un nouvel objet de ligne normale. Lors de la création d'un objet ligne, nous utilisons les noms de colonnes définis dans le tableau columns pour attribuer la valeur d'attribut de chaque élément à la colonne correspondante de l'objet ligne. Enfin, nous renvoyons tous les objets ligne dans le tableau rows. #🎜🎜##🎜🎜#Avec ce composant table, nous pouvons utiliser Vue pour implémenter les fonctions de regroupement et de fusion de tables. Il nous suffit de transmettre un objet de données contenant les notes des étudiants au composant table et d'implémenter les fonctions ci-dessus dans le composant. Lors du rendu d'un tableau, le composant fusionne automatiquement les lignes ordinaires adjacentes dans un groupe et affiche des informations récapitulatives sous le groupe. #🎜🎜##🎜🎜#En bref, il est très simple d'utiliser Vue pour implémenter les fonctions de regroupement et de fusion de tables. Il vous suffit de convertir les données dans un format adapté au tableau et d'implémenter la logique de rendu correspondante dans le composant tableau. Cette fonctionnalité améliore non seulement la convivialité et l'expérience utilisateur du tableau, mais permet également aux utilisateurs de mieux comprendre et analyser les données. #🎜🎜#Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
