Vue progression (four and four) : VUe-elementUI enables more effects of action fields

In the process of project development, it is necessary to realize the switching effect between the icon button in the operation bar and the text button. In the process of realizing the text button, the general idea is as follows: Only the first two menus are displayed in the operation bar, and the following menus are displayed in more ways, and the remaining menu buttons are displayed by clicking more. The implementation code is as follows:

<template slot-scope="scope">
	<el-dropdown :split-button="false" trigger="click" type="text" @command="handleCommand" class="dropdown el-dropdown-link">
    <span>More and more<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>
Copy the code