鍍金池/ 問答/HTML/ vue v-for如何按固定行數(shù)渲染列表

vue v-for如何按固定行數(shù)渲染列表

有數(shù)組對象，想按列渲染，一列顯示23行，第一列大于23，開始渲染第二列，數(shù)據(jù)格式如下：

   {
    "case1": [
        {
        "name": "src1"
        },
        {
        "name": "currentSrc1"
        }
    ],
    "case2": [
        {
        "name": "src2"
        },
        {
        "name": "currentSrc2"
        }
    ]
}

最終想要的效果，如下圖，key需要單獨(dú)顯示，下面name依次且有序號：
圖片描述

我現(xiàn)在思路只能通過兩次v-for循環(huán)顯示出，每個(gè)大類case及它下面的name,不知道如何做到從左至右，一列顯示23條后，再轉(zhuǎn)入第二列，依次往后，請問有什么思路或者辦法處理這個(gè)問題，現(xiàn)在效果如下圖：
圖片描述

回答
編輯回答
女流氓

支持flex嗎，可以使用flex或grid

.box{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}

flex

2018年3月16日 07:14
編輯回答
溫衫

用你源數(shù)據(jù)直接處理可能比較麻煩。
你可以換個(gè)思路，可以用computed提前處理源數(shù)據(jù)，處理成切分好的，每個(gè)子數(shù)組長度為23的二維數(shù)組，再用這個(gè)二維數(shù)組渲染列表

2017年11月3日 03:54