vue v-for渲染li空数据如何补全

在做项目的过程中遇到一个问题，就是数据只有2条，但是页面的展示需要14行，如果数据不够14条页面中没有数据的项就不会展示白色横线的效果。
我们可以通过一个函数进行数据的补全，将没有数据的li项用“ ”来补全
html文件如下

<ul>
      <li :class="['FlexRow',{'active':current==index},'item-box']" v-for="(item,index) in compeleteList(procedureList,14,' ')"  @click="selectItem(index)" >

       <div style="padding:2px" >
       <div class="unfold" v-if="item.secMenu"></div>
       </div>
       <div style="padding:2px" >
        <div class="fold"></div>
      </div>
       <span  :class="[current==index?'highlinght':'procedure-item']">{{item.name}}</span>
      </li>
 </ul>

js如下：

data() {
        return {
            procedureList: [{ name: 'User Protocols'}, { name:'Factory Protocols'}],

        }
    },
    methods: {
        compeleteList(arr,n,str) {
            for (var i = arr.length; i < n; i++) {
                arr.push(str)
            }
            return arr;
        }
    },
    

效果如下