Cara membungkus meja yang digelungkan oleh uniapp

Dalam proses menggunakan Uniapp untuk membangunkan, selalunya perlu menggunakan jadual untuk memaparkan data Walau bagaimanapun, jika terdapat banyak data, lebar jadual mungkin tidak mencukupi dan teks dalam setiap baris tidak boleh sepenuhnya. dipaparkan. Dalam kes ini, teks panjang perlu Pemprosesan balut baris dilakukan untuk memaparkan data dengan lebih baik.

1. Prinsip pembalut jadual

Dalam jadual HTML tradisional, kita boleh menggunakan gaya CSS untuk mengawal reka letak jadual dan format kandungan sel. Dalam jadual yang dibina oleh Uniapp, ia masih boleh dikawal melalui gaya CSS untuk merealisasikan pembalut baris teks dalam jadual.

Sebagai contoh, kita boleh menambah word-wrap: break-word dalam gaya CSS untuk menentukan kaedah pembalut teks dalam sel. Gaya ini boleh memaksa perkataan untuk pecah di tengah untuk mencapai pemisah baris dalam teks.

2. Paparan jadual gelung Uniapp

Dalam jadual Uniapp, kita boleh menggelungkan data dan memaparkan jadual. Untuk kaedah pelaksanaan khusus, sila rujuk bab "Loop Traversal" dalam dokumentasi rasmi.

Dalam proses menggelungkan jadual, kita boleh menggunakan arahan v-for untuk melintasi data dan memaparkan kandungan secara dinamik. Dalam sel setiap baris, kita boleh menambah gaya untuk mengawal pembalut teks untuk menyesuaikan diri dengan keperluan data yang berbeza.

Sebagai contoh, kita boleh mentakrifkan kelas bernama "table-wrapper" dalam elemen jadual, dan kemudian menambah gaya berikut pada kelas ini dalam gaya CSS:

.table-wrapper td {

word-wrap: break-word;

}

Dengan cara ini, apabila Uniapp mengitari jadual, teks panjang dalam setiap sel akan dibalut secara automatik mengikut gaya. Untuk teks yang sangat panjang, anda juga boleh menggabungkan gaya lebar maksimum untuk mengawal lebar sel untuk mengelakkan sesak jadual.

3. Contoh program

Berikut ialah contoh program yang menggunakan Uniapp untuk menggelungkan jadual untuk memaparkan data dan membungkus teks dalam sel:

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

Dalam contoh program ini , kami mentakrifkan gaya CSS bernama "pembungkus meja", yang menentukan kaedah pembalut teks sel dan beberapa gaya jadual umum. Apabila menggelung melalui data jadual, kami mengikat data sel setiap baris ke jadual secara dinamik dan menggunakan ":key" untuk membantu Vue menjejaki perubahan dalam data dinamik dengan betul.

Ringkasnya, jadual yang dilingkarkan dalam Uniapp boleh mengawal pembalut baris teks dalam sel melalui gaya CSS untuk mengoptimumkan paparan data. Dengan menetapkan kaedah pembalut baris yang sesuai dan melaraskan lebar sel, kami boleh memaparkan data teks yang panjang dengan lebih baik dan meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Cara membungkus meja yang digelungkan oleh uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!