求助：用Vue.js实现可展开折叠的4列GridView组件

I’ve put together a complete, self-contained implementation that meets all your requirements. It uses Vue’s reactivity system to handle the expand/collapse state, along with CSS Grid to create the clean 4-column layout you need.

Full Implementation Code #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toggleable GridView</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding: 0 1rem;
        }
        .grid-item {
            padding: 1.5rem;
            background: #f8fafc;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .toggle-btn {
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            background: #3b82f6;
            color: white;
            cursor: pointer;
            font-size: 1rem;
            display: block;
            margin: 0 auto;
        }
        .toggle-btn:hover {
            background: #2563eb;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="grid-container">
            <div v-for="(item, index) in displayedItems" :key="index" class="grid-item">
                Item {{ item.id }}
            </div>
        </div>
        <button @click="toggleView" class="toggle-btn">
            {{ isExpanded ? 'View Less' : 'View All' }}
        </button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    // Replace this with your actual dataset (32 items simulated here)
                    items: Array.from({ length: 32 }, (_, i) => ({ id: i + 1 })),
                    isExpanded: false // Tracks if we're showing all items or just the first 2 rows
                };
            },
            computed: {
                displayedItems() {
                    // Show first 8 items (2 rows of 4) when collapsed, all when expanded
                    return this.isExpanded ? this.items : this.items.slice(0, 8);
                }
            },
            methods: {
                toggleView() {
                    this.isExpanded = !this.isExpanded;
                }
            }
        });
    </script>
</body>
</html>

Key Parts Explained #

• 4-Column Grid: The .grid-container uses CSS Grid's repeat(4, 1fr) rule to automatically split items into 4 equal-width columns per row—no manual row tracking needed.
• Reactive State: The isExpanded boolean controls whether we show the full dataset or just the first 2 rows. Vue’s reactivity system takes care of updating the UI when this state changes.
• Computed Display List: The displayedItems computed property filters your full dataset on the fly. When collapsed, it returns only the first 8 items; when expanded, it returns everything.
• Dynamic Button: The button text switches between "View All" and "View Less" using a simple ternary operator tied to the isExpanded state.
• Smooth Toggle: Clicking the button flips the isExpanded value, which triggers Vue to re-render the grid with the correct set of items instantly.

Integrating with Your Existing Code #

If you already have your own items array, just swap out the simulated array in the data section. The rest of the logic (toggle state, computed property, button click handler) can be dropped directly into your existing Vue component—no extra libraries required.

内容的提问来源于stack exchange，提问作者RajeshVijayakumar