How to wrap the table looped out by uniapp

In the process of using Uniapp development, it is often necessary to use tables to display data. However, if there is a lot of data, the width of the table may be insufficient and the text in each line cannot be fully displayed. In this case, the long text needs to be Line wrap processing is performed to better display the data.

1. Principle of table line wrapping

In traditional HTML tables, we can use CSS styles to control the layout of the table and the content format of the cells. In the table built by Uniapp, it can still be controlled through CSS styles to realize the line wrapping of the text in the table.

For example, we can add word-wrap: break-word; in the CSS style to specify the wrapping method of the text in the cell. This style can force words to break in the middle to achieve line breaks in the text.

2. Uniapp loop table display

In the Uniapp table, we can loop through the data and display the table. For specific implementation methods, please refer to the "Loop Traversal" chapter in the official documentation.

In the process of looping the table, we can use the v-for instruction to traverse the data and dynamically display the content. In the cells of each row, we can add styles to control the wrapping of text to adapt to different data needs.

For example, we can define a class named "table-wrapper" in the table element, and then add the following style to this class in the CSS style:

.table-wrapper td{

word-wrap: break-word;

}

In this way, when Uniapp cycles through the table, the long text in each cell will automatically wrap according to the style. For particularly long text, you can also combine the max-width style to control the width of the cell to avoid overcrowding the table.

3. Sample Program

The following is a sample program that uses Uniapp to loop through tables to display data and wrap the text in cells:

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

In this sample program , we defined a CSS style named "table-wrapper", which specifies the cell text wrapping method and some general table styles. When looping through the table data, we dynamically bound the cell data of each row to the table, and used ":key" to help Vue correctly track changes in dynamic data.

To sum up, the tables looped out of Uniapp can control the line wrapping of text in cells through CSS styles to optimize data display. By setting appropriate line breaks and adjusting cell widths, we can better display long text data and improve the user experience.

The above is the detailed content of How to wrap the table looped out by uniapp. For more information, please follow other related articles on the PHP Chinese website!