Comment envelopper la table en boucle par Uniapp

Dans le processus d'utilisation d'Uniapp pour développer, il est souvent nécessaire d'utiliser des tableaux pour afficher les données. Cependant, s'il y a beaucoup de données, la largeur du tableau peut être insuffisante et le texte de chaque ligne ne peut pas être entièrement affiché. Dans ce cas, le texte long doit être traité pour mieux présenter les données.

1. Principe du retour à la ligne du tableau

Dans les tableaux HTML traditionnels, nous pouvons utiliser des styles CSS pour contrôler la disposition du tableau et le format du contenu des cellules. Dans le tableau construit par Uniapp, il peut toujours être contrôlé via des styles CSS pour réaliser le retour à la ligne du texte dans le tableau.

Par exemple, nous pouvons ajouter word-wrap: break-word; dans le style CSS pour spécifier la méthode d'habillage du texte dans la cellule. Ce style peut forcer les mots à se briser au milieu pour obtenir des sauts de ligne dans le texte.

2. Affichage du tableau de boucle Uniapp

Dans le tableau Uniapp, nous pouvons parcourir les données et afficher le tableau. Pour les méthodes d'implémentation spécifiques, veuillez vous référer au chapitre « Loop Traversal » dans la documentation officielle.

Dans le processus de boucle du tableau, nous pouvons utiliser l'instruction v-for pour parcourir les données et afficher dynamiquement le contenu. Dans les cellules de chaque ligne, nous pouvons ajouter des styles pour contrôler l'habillage du texte afin de l'adapter aux différents besoins en données.

Par exemple, nous pouvons définir une classe nommée "table-wrapper" dans l'élément table, puis ajouter le style suivant à cette classe dans le style CSS :

.table-wrapper td{

word-wrap: break-word;

}

This De cette manière, lorsque Uniapp parcourt le tableau, le texte long de chaque cellule sera automatiquement renvoyé à la ligne en fonction du style. Pour un texte particulièrement long, vous pouvez également combiner le style max-width pour contrôler la largeur de la cellule afin d'éviter de surcharger le tableau.

3. Exemple de programme

Ce qui suit est un exemple de programme qui utilise Uniapp pour parcourir des tableaux afin d'afficher des données et d'envelopper le texte dans des cellules :

<template>
    <div class="container">
        <table class="table-wrapper">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>电话</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in tableData" :key="index">
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.gender }}</td>
                    <td>{{ item.phone }}</td>
                    <td>{{ item.address }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [
                    {
                        name: "张三",
                        age: 25,
                        gender: "男",
                        phone: "13888888888",
                        address: "广东省深圳市南山区科技园北区"
                    },
                    {
                        name: "李四来",
                        age: 22,
                        gender: "女",
                        phone: "13999999999",
                        address: "广东省深圳市南山区科技园北区"
                    },
                    {
                        name: "王五",
                        age: 30,
                        gender: "男",
                        phone: "13666666666",
                        address: "广东省深圳市福田区CBD科技园"
                    }
                ]
            }
        }
    }
</script>

<style>
    .container {
        margin: 20px;
    }

    .table-wrapper {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .table-wrapper td{
        word-wrap: break-word;
        max-width: 150px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        padding: 6px;
        border: 1px solid #dcdcdc;
    }

    .table-wrapper th {
        background-color: #f5f5f5;
        font-weight: normal;
        text-align: left;
        padding: 6px;
        border: 1px solid #dcdcdc;
    }
</style>

Dans cet exemple de programme, nous définissons un programme appelé CSS "table-wrapper". style, qui spécifie la méthode d'habillage du texte des cellules et certains styles de tableau généraux. Lors de la lecture en boucle des données du tableau, nous avons lié dynamiquement les données de cellule de chaque ligne au tableau et utilisé ":key" pour aider Vue à suivre correctement les modifications des données dynamiques.

Pour résumer, le tableau bouclé dans Uniapp peut contrôler le retour à la ligne du texte dans les cellules via des styles CSS pour optimiser l'affichage des données. En définissant des méthodes de retour à la ligne appropriées et en ajustant la largeur des cellules, nous pouvons mieux afficher les données de texte long et améliorer l'expérience utilisateur.

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!