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 = []}})
}

四、拓展阅读

《Vue进阶（幺贰贰）：ES6 判断是否为空对象》

Vue进阶（幺贰叁）：v-for 实现一行展示 n 个元素相关推荐

Vue进阶（贰零叁）：iframe嵌套页面IE不展示问题解决
文章目录一.前言二.问题分析三.解决方法四.拓展阅读一.前言在前期博文<Vue进阶(六十四):iframe更改src后页面未刷新问题解决>中讲解了iframe更改src后页面未 ...
Vue进阶（贰零壹）：JS合并两个数组方法详解
文章目录一.前言二.实现 2.1 concat 2.2 for循环 2.3 apply 2.4 ...拓展符三.拓展阅读一.前言项目开发过程中,将两个数组合并成为一个的情况十分常见.比如: ...
Vue进阶（贰零柒）：Webpack 性能优化措施汇总
文章目录一.前言二.优化方案 2.1 优化 Loader 2.2 DllPlugin 2.3 代码压缩 2.4 一些小的优化点 2.5 减少 Webpack 打包后的文件体积 2.5.1 按需加载 ...
Vue进阶（贰佰）：前端UI框架介绍
文章目录前言一. ElementUI 二.iView UI 三.Ant-design-vue 四.at-ui 五.Mint UI 六.WeUI 七.cube-ui 八.amaze UI 九.Flu ...
Vue进阶（贰零壹）：el-steps 实现页面内导航
文章目录一.前言二.属性介绍三.Demo 四.拓展阅读一.前言在前端开发过程中,当页面内容分为若干栏目后,通过增加导航栏位定位至相应栏目不失为一种良好的用户体验. 应用el-steps可实现 ...
Vue进阶（幺贰柒）：插槽详解
文章目录一.概述二.使用步骤三.何时使用插槽? 四.如何使用插槽? 五.拓展阅读一.概述插槽就是子组件中用slot标签定义的预留位置,可以设置name属性,也可以不设置name属性,设置na ...
Vue进阶（幺肆叁）：如何用绝对定位(position:absolute)完美定位布局及其注意事项
文章目录一.前言二.标准流 2.1 排布规则三.Demo 四.拓展阅读一.前言在<Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解>一文中,讲 ...
Vue进阶（幺贰零）：父组件获取子组件验证结果
文章目录一.前言二.代码实现三.拓展阅读一.前言在开发Vue项目过程中,代码复用之自定义组件是常做事情.当子组件为form表单的时候,父组件需要获取子组件(表单)的验证结果. 尽管有 pro ...
Vue进阶（幺陆叁）：vue项目启动后自动打开页面并设置默认浏览器
文章目录一.修改默认浏览器二.vue 项目启动自动打开页面三.拓展阅读以windows 系统为例,操作方法如下: 一.修改默认浏览器设置谷歌浏览器为默认浏览器. 1.首先打开"开始 ...

Vue进阶（幺贰叁）：v-for 实现一行展示 n 个元素

文章目录

一、需求背景

二、需求分析

三、解决方案

四、拓展阅读

Vue进阶（幺贰叁）：v-for 实现一行展示 n 个元素相关推荐

最新文章

热门文章