项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作

1.HTML样式部分:关键点在于command 方法和属性

 1 <el-dropdown
2 size="small"
3 placement="bottom"
4 trigger="click"
5 @command="batchOperate"
6 style="margin-left: 10px;"
7 >
8 <el-button class="search-btn" size="mini">
9 其他操作
10 <i class="el-icon-arrow-down el-icon--right"></i>
11 </el-button>
12 <el-dropdown-menu slot="dropdown">
13 <el-dropdown-item command="batch_remarks"
14 >批量备注</el-dropdown-item
15 >
16 <el-dropdown-item command="export_excel"
17 >本页导出Excel</el-dropdown-item
18 >
19 </el-dropdown-menu>
20 </el-dropdown>

2.Javascript部分:分别设置每个按钮的各自方法

 1 methods: {
2 batchOperate(command) {
3 switch (command) {
4 case "batch_remarks":
5 this.dialogRemarks();
6 break;
7 case "export_excel":
8 this.exportExcel();
9 break;
10 }
11 },
12 // 导出本页Excel表
13 exportExcel() {
14 console.log(111)
15 },
16 dialogRemarks() {
17 console.log(222)
18 },
19 }

vue+element下拉框样式的点击按钮的更多相关文章

  1. jquery美化select,自定义下拉框样式

    select默认的样式比较丑,有些应用需要美化select,在网上找到一个很好的美化样式效果,本人很喜欢,在这里分享一下. <!DOCTYPE html PUBLIC "-//W3C/ ...

  2. vue获取下拉框值

    vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...

  3. vue select下拉框绑定默认值

    vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...

  4. vue+element下拉树选择器

    项目需求:输入框点击弹出树形下拉结构,可多选或者单选. 解决方案:1.使用layui formSelect多选插件 2.基于vue+elementui 下拉框和树形控件组合成树形下拉结构 <el ...

  5. VUE 单选下拉框Select中动态加载 默认选中第一个

    <lable>分类情况</lable> <select v-model="content.tid"> <option v-for=&quo ...

  6. 基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别

    还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下:  继续解释这两种的区别: 1.其实基于定 ...

  7. 百度“搜索设置”之基于定位下拉框或者需要点击link才显示的下拉框,二次定位与多次定位实现的实际效果区别

    还是基于上次那个练习的后续出现的思考,http://www.cnblogs.com/8013-cmf/p/6555790.html 界面: 源码: 写法如下:  继续解释这两种的区别: 1.其实基于定 ...

  8. vue实现下拉框全选和输入匹配

    实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...

  9. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

随机推荐

  1. 201871010106-丁宣元 《面向对象程序设计(java)》第十六周学习总结

    201871010106-丁宣元 <面向对象程序设计(java)>第十六周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://home.cnblogs.com/u/nw ...

  2. 201871010106-丁宣元 《面向对象程序设计(java)》第六—七周学习总结

    201871010106-丁宣元 <面向对象程序设计(java)>第六—七周学习总结 正文开头 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu- ...

  3. 201871010118-唐敬博《面向对象程序设计(java)》第十二周学习总结

    博文正文开头格式:(2分) 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.co ...

  4. appium连接genymation运行计算器的例子

    #coding=utf-8from appium import webdriverdesired_caps={}desired_caps["platformName"]=" ...

  5. LeetCode 1257. Smallest Common Region

    原题链接在这里:https://leetcode.com/problems/smallest-common-region/ 题目: You are given some lists of region ...

  6. 阿里云等云端服务器VPS改造为ROS-Routeros,最大化利用云端硬盘

    因为ROS官方提供的CHR镜像是用16G版本做出来的,所以我们用dd的方法做出来的ROS,空间都是16G. 如果你的云端是40G空间或者更多呢,也只用了16G空间,是不是很浪费. 我今天看到一篇大神写 ...

  7. OsharpNS轻量级.net core快速开发框架简明入门教程-Osharp.Permissions使用

    OsharpNS轻量级.net core快速开发框架简明入门教程 教程目录 从零开始启动Osharp 1.1. 使用OsharpNS项目模板创建项目 1.2. 配置数据库连接串并启动项目 1.3. O ...

  8. Debug 路漫漫-10:AttributeError: 'Embedding' object has no attribute 'get_shape'

    CNN的Embedding层报错: 报错:AttributeError: 'Embedding' object has no attribute 'get_shape' 查了下是这个问题: https ...

  9. Oracle 自定义函数实现列转行效果

    在 Oracle 领域,我相信一说到列转行大部分人都会立马想到 WM_CONCAT 函数,我觉得主要是因为该函数比较实用.但事实上 WM_CONCAT 并非官方公开函数,使用会存在一定的风险:函数返回 ...

  10. gitlab 账号

    gitlab 账号 国外版-比较慢 https://gitlab.com/hgnulb 国内版-比较快 https://git.lug.ustc.edu.cn/hglibin github账号 htt ...