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) break case 'b': aMethod(inputParam) break ... } }
		}
	}
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/109645861