Vue进阶（幺肆伍）：Vue-elementUI实现操作栏位更多效果

项目开发过程中，需要实现操作栏位图标按钮与文字按钮切换效果，在实现文字按钮过程中，大致思路如下：操作栏位只展示前2个菜单，之后的菜单采用更多方式展示，通过点击更多展示其余菜单按钮。
实现代码如下：

<template slot-scope="scope"><el-dropdown :split-button="false" trigger="click" type="text" @command="handleCommand" class="dropdown el-dropdown-link"><span>更多<i class="el-icon-caret-bottom el-icon--right"></i></span><el-dropdown-menu slot="dropdown" v-if="!!user.hobbies && user.hobbies.length > 0"><template v-for="item in user.hobbies"><el-dropdown-item @click.native="toMethod(item.methodnm, scope.row)">{{ item.name }}</el-dropdown-item></template></el-dropdown-menu></el-dropdown>
</template>
<script>export default {methods: {toMethod (methodnm, inputParam) {switch (methodnm) {case 'a':aMethod(inputParam)breakcase 'b':aMethod(inputParam)break...}}}}
</script>

Vue进阶（幺肆伍）：Vue-elementUI实现操作栏位更多效果相关推荐

elementui表格操作栏第一行不显示边线
在全局样式下设置 .el-table th.is-leaf, .el-table td {border-width: 0.5px; } // 表格错位问题(待验证) .el-table th.gutt ...
Vue进阶（幺贰叁）：v-for 实现一行展示 n 个元素
文章目录一.需求背景二.需求分析三.解决方案四.拓展阅读一.需求背景在开发前端项目过程中,遇到结果列表操作栏位需要每2个按钮元素为一行展示需求. 二.需求分析可通过将返回值封装为二维数组 ...
Vue 进阶系列丨自定义指令实现按钮权限功能
Vue 进阶系列教程将在本号持续发布,一起查漏补缺学个痛快!若您有遇到其它相关问题,非常欢迎在评论中留言讨论,达到帮助更多人的目的.若感本文对您有所帮助请点个赞吧! 2013年7月28日,尤雨溪第一次 ...
Vue进阶（幺肆叁）：如何用绝对定位(position:absolute)完美定位布局及其注意事项
文章目录一.前言二.标准流 2.1 排布规则三.Demo 四.拓展阅读一.前言在<Vue进阶(幺肆贰):CSS-静态定位,相对定位,绝对定位,固定定位的用法和区别详解>一文中,讲 ...
Vue进阶（幺肆玖）：template 标签
文章目录一.HTML5 中的 template 标签二.Vue 中的 template 标签三.注意事项四.拓展阅读一.HTML5 中的 template 标签 html5中template ...
Vue进阶（幺肆捌）：Vuex 辅助函数详解
文章目录一.前言二.辅助函数三.如何使用辅助函数四.辅助函数如何去映射 vuex.store 中的属性 4.1 mapState: 把 state 属性映射到 computed 身上 4.2 ...
Vue进阶（幺贰零）：父组件获取子组件验证结果
文章目录一.前言二.代码实现三.拓展阅读一.前言在开发Vue项目过程中,代码复用之自定义组件是常做事情.当子组件为form表单的时候,父组件需要获取子组件(表单)的验证结果. 尽管有 pro ...
Vue进阶（幺捌柒）：vue项目build报错的解决办法（ERROR in static/js/***.js from UglifyJs）
文章目录一.前言二.问题分析三.问题解决四.拓展阅读一.前言 Vue项目编译过程中,出现如下错误信息: ERROR in static/js/vendor.f1c68aa2d5e85847d ...
Vue进阶（幺捌零）：JS 向 Vue 传值
文章目录一.前言二.思路三.代码实现四.效果五.拓展阅读一.前言项目开发过程中,组件通过render()函数渲染生成,并在组件内部定义了自定义拖拽指令.自定义拖拽指令实现了用户可以进行元 ...

Vue进阶（幺肆伍）：Vue-elementUI实现操作栏位更多效果

Vue进阶（幺肆伍）：Vue-elementUI实现操作栏位更多效果相关推荐

最新文章

热门文章