写点什么

Vue 进阶(幺贰叁):v-for 实现一行展示 n 个元素

发布于: 2 小时前
Vue进阶(幺贰叁):v-for 实现一行展示 n 个元素

一、需求背景

在开发前端项目过程中,遇到结果列表操作栏位需要每 2 个按钮元素为一行展示需求。

二、需求分析

可通过将返回值封装为二维数组,或者根据数组下标进行换行操作。

三、解决方案

经过实践,发现将返回值数组封装为二维数组,然后前端通过el-row,el-col标签封装实现。实现代码如下:


<el-row v-for="(btnArr, index) in oprBtn" :key="index">  <el-col v-for="(btn, index) in btnArr" :key=''btn.laberid">    <el-button type="text" @click="btnClick(btn.laberid)"></el-button>  </el-col></el-row>
复制代码


let arrTmp = []this.displayBtn = []if (this.displayBtn.length === 1) {  this.oprBtn.push(this.displayBtn)} else {  this.displayBtn.forEach((item, index, cols) => {    arrTmp.push(item)    if ((index + 1) % 2 === 0) {      this.displayBtn.push(arrTmp)      arrTmp = []    }  })}
复制代码

四、拓展阅读

发布于: 2 小时前阅读数: 3
用户头像

No Silver Bullet 2021.07.09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
Vue进阶(幺贰叁):v-for 实现一行展示 n 个元素