带有可扩展可折叠行html的gridview

Question

我需要 gridview，它有 'n' 行，每行有 4 列/要显示的项目。我只想使用 Html/Javascript/Vuejs 模板来实现。

我想实现如下视图： 在上图中，我们有“查看全部”按钮，假设我们有 32 个数据集，网格应该有 8 行，每行将有 4 个项目/列。最初我只需要两行（显示 8 个项目）和“查看全部”，当我点击按钮时，它应该展开并显示所有行和项目。带有“少看”文字。当我再次点击时，它应该会折叠并且应该只显示 2 行和 8 个项目。

<template>
  <div>
<list>
  <cell style="flex-direction:row; align-items:center ;" v-for="(rowdata,index) in griddata" :key="index" >
    <div v-for="(rowitem, i) in rowdata" style="flex:1;flex-direction:column; backgroundColor:blue;margin:10px;height:100px; align-items:center;" :key="i">
        <image class="item-icon" src="https://gw.alicdn.com/tfs/TB1788ygMMPMeJjy1XdXXasrXXa-1919-1520.jpg"></image>
        <text style="color:white;justify-content:center;align-items:center;backgroundColor:red;flex:1; text-align:center;">{{rowitem}}</text>
    </div>
  </cell>
</list>
<text class="view-all-container" v-if="viewText" >{{viewText}}</text>
 </div>
</template>

<script>
  export default {
    props: {
      data: Object,
    },
  data() {
    return {
         isOpen: false,
         viewText: 'View All',
         borderRight: 'item-border-right',
         appearFlag: [],
         griddata:[]
    };
   },

   created() {
      for(var i =0;i<5;i++){
            var rowdata = []
            rowdata.push("1")
            rowdata.push("2")
            rowdata.push("3")
            this.griddata.push(rowdata)
         }
    },
    }
  </script>

   <style scoped lang="sass?outputStyle=expanded">

    .container {
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
     }
    .icon-row {
        width: 750px;
        flex-direction: row;
        align-items: flex-start;
     }
    .icon {
         width: 188px;
         height: 168px;
         padding-top: 30px;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         border-bottom-style: solid;
         border-bottom-color: #ebebeb;
         border-bottom-width: 1px;
       }
      .item-border-right {
            border-right-style: solid;
            border-right-color: #ebebeb;
            border-right-width: 1px;
       }
       .item-icon {
            width: 54px;
            height: 54px;
            margin-bottom: 15px;
        }
        .item-text {
            padding-left: 14px;
            padding-right: 14px;
            font-size: 22px;
            color: #666;
            text-align: center;
            lines: 2;
            height: 64px;
            text-overflow: ellipsis;
          }
         .view-all-container {
              width: 750px;
               margin-top: 30px;
               margin-bottom: 30px;
                text-align: center;
              font-size: 26px;
                font-weight: 500;
             color: #ef4e28;
   }
   </style>

注意：我已经在堆栈中搜索并验证，无法获得任何解决方案。请帮我解决这个问题..

Answer 1

有许多不同的方法可以做到这一点。一种（简单）方法是在created 钩子中加载初始网格，如下所示：

 this.initialGrid = createGrid(2, 4)

其中createGrid定义为：

const createGrid = (rows, cols) => {
 const grid = []
 for (let i = 0; i < rows; i++) {
   grid[i] = []
   for (let j = 0; j < cols; j++) {
     grid[i][j] = "some/image" // could store respective image paths in an array and push them into the grid
   }
 }
 return grid
} 

这将为您提供 2 行和 4 列，前提是您已初始化 createGrid。然后在data 挂钩中，您可以将具有所需尺寸的网格存储为“原始网格”。模板可以很简单：

<div id="grid">
 <div class="flex-container"
      v-for="rows in showGrid">
 <!-- just a placeholder, you'd likely want an img tag, etc -->
   <div v-for="cols in rows">
      {{ cols }}
   </div>
 </div>
 <button
      v-show="!toggleLoadButton"
      @click="toggleLoadButton = true"
 >
 show more
 </button>
 <button
      v-show="toggleLoadButton"
      @click="toggleLoadButton = false"
 >
 show less
 </button>
</div>

这里是一个例子：https://codepen.io/anon/pen/VxQeRV?editors=1010 此解决方案的局限性在于您要么加载两行，要么加载所有行。