开始正文之前,有必要先说自己实现这个组件的必要性描述。

  话说大家做表格时,增删查改按钮都是放在哪里的?最简单的方式应该是这样:

是不是感觉奇丑无比啊,于是改成了这样:

但是这种操作按钮一多后就没位置放了,于是继续改成这种:

  然而我老大认为这种按钮一多依然不太好看。。。

  那还有什么办法呢?陷入沉思。

  先说说我的做法,我的做法是这样的:

  我的想法是常用高频的操作双击行弹窗Modal,所有操作按钮都不放表格里,全放表格上方的右侧,点击想操作的行,会高亮那一行,然后点击上方的操作按钮即可,这样有个需要注意的是,每行不能过高,过长的内容得用ellipsis: true来省略显示,并且最好每页只展示10行,这样可以保证不管想操作哪一行,都在同一个界面操作,不需要滑动滚动条。这样虽然看起来完美解决了行内放操作按钮太多不好看的问题,但我老大显然不这样认为,他觉得双击编辑这个用户不一定会知道,这样就得放个提示信息,但他又不想提示,而且点击行,再点击上方操作按钮,比较麻烦。。。?

  于是我试着提一个建议,就是还是双击行进入编辑弹窗,然后每行右侧放个下拉菜单,就像这样:

  然而老大还是不满意,他说他想要的是element里的DropDown,那个下拉菜单有个split-button功能,就是可以下拉菜单的左边是个按钮,有按钮独自的点击事件,右侧才是下拉菜单。可是iView里的DropDown没有这种东西,于是我去iView那里提了个功能建议issure

  可是我发现虽然标记成了may be supported in the future,然而要等iView大佬上线这个估计要等到黄花菜都凉了。所以我决定自己动手丰衣足食。

  大概看了下element的实现,其实就是分离成两个按钮,左边的按钮可以点击,右边的按钮给下拉菜单用,然后把这两个按钮凑在一起就搞定了。实现起来其实不难,代码也不长,我直接贴出来了:

<template>
<span>
<Button :type="type" @click="$emit('click')" :size="size" :icon="icon" class="btnLeft">
<slot></slot>
</Button>
<Dropdown @on-click="command" :trigger="trigger">
<Button :type="type" icon="ios-arrow-down" :size="size" class="btnDown"/>
<template slot="list">
<slot name="list"></slot>
</template>
</Dropdown>
</span>
</template> <script>
export default {
props: {
/**
* @description 按钮类型,可选值为 default、primary、dashed、text、info、success、warning、error
*/
type: {
type: String,
default: "primary"
},
/**
* @description 按钮大小,可选值为large、small、default或者不设置
*/
size: String,
/**
* @description 触发方式,可选值为 hover(悬停)click(点击)contextMenu(右键),默认是hover
*/
trigger: String,
/**
* @description 设置按钮的图标类型
*/
icon: String
},
methods: {
command: function(key) {
this.$emit("command", key);
}
}
};
</script>
<style>
.btnDown {
margin-left: 0 !important;
padding-left: 5px !important;
padding-right: 5px !important;
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
}
.btnLeft {
margin-right: 0 !important;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>

  使用时直接import这个组件,然后用法也和原来的DropDown差不多:

      <ButtonDrop @command="setStatus" @click="setPage(1)" size="large" icon="md-create">
编辑
<DropdownMenu v-once slot="list">
<DropdownItem :name="-1">全部</DropdownItem>
<DropdownItem v-for="t in statuss" :key="t.k" :name="t.k">{{t.v}}</DropdownItem>
</DropdownMenu>
</ButtonDrop>

  最终的效果就是这样:

  然后把这个用render放到表格的每一行的右侧即可。

  其实这个组件也是比较简单的,重要的是这里面的思路历程。

what?iView的DropDown没有element的split-button?提issure?等不及了,自己实现一个的更多相关文章

  1. MFC控件(7):Split Button

    VS2008中可以看到MFC有一个叫Split Button的控件,要想看它的效果,瞧下QQ那聊天窗口的"发送", "消息记录"这两个按钮就知道了.实际上就是还 ...

  2. jQuery 分割按钮(Split Button)

    代码写多了,有些使用过的方法和技巧会一时半会想不起来,平日记录下来,方便自己和有需要的人日后查阅. <html> <head> <style type="tex ...

  3. element中使用button会刷新一遍页面

     会刷新:   <el-form-item> <button @click="register('form')" class="submitBtn&qu ...

  4. Bootstrap源码分析之dropdown

    源码分析: Dropdowns.scss:下拉框模块 Javascripts/bootstrap/dropdown.js:实现下拉框响应 实现功能及原理: 下拉选项卡,默认不能实现显示选中项的功能 原 ...

  5. Bootstrap Dropdown 源码分析

    /* ======================================================================== * Bootstrap: dropdown.js ...

  6. amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown

    amazeui学习笔记--js插件(UI增强4)--下拉组件Dropdown 一.总结 1.am-dropdown(及其孩子):控制下拉列表的样式 2.data-am-dropdown(及其孩子):控 ...

  7. iview 踩坑之旅

    公司重构管理系统,框架定了vue,UI在element和iview之间选,element样式被吐槽丑,于是选了iview,但是,,这个坑多啊... 废话少说,罗列了iview中容易出错或者懵逼的一些地 ...

  8. 【技术博客】使用iview的Tree组件写一棵文件树

    本次项目的前端部分使用vue框架+iview组件构建,其中IDE的文件树部分使用了iview的Tree组件,但是Tree组件本身的接口功能极其有限,网上的相关资料也不多,在使用时费了一番功夫才摸索清楚 ...

  9. Vue前端框架基础+Element的使用

    前置内容: AJAX基础+Axios快速入门+JSON使用 目录 1.VUE 1.1 概述 1.2 快速入门 1.3 Vue指令 1.3.1 v-bind & v-model 指令 1.3.2 ...

随机推荐

  1. mongodb 遇到的问题一 Error: connect ECONNREFUSED 127.0.0.1:27017

    node配合mongodb是配置完成后,访问时出现 Error: connect ECONNREFUSED 127.0.0.1:27017,的报错 原因在于你的mongodb数据库没开, node下的 ...

  2. rmq问题模板处理

    rmq问题: 先贴一下定义 范围最值查询 维基百科,自由的百科全书 范围最值查询(Range Minimum Query),是针对数据集的一种条件查询.若给定一个数组 A[1, n],范围最值查询指定 ...

  3. clipboard.js一个可以在移动端一键复制的插件

    网址:https://clipboardjs.com/ 使用方法: 1.引入js <script src="dist/clipboard.min.js"></sc ...

  4. css3 @keyframes、transform详解与实例

    一.transform 和@keyframes动画的区别: @keyframes动画是循环的,而transform 只执行一遍. 二.@keyframes CSS3中添加的新属性animation是用 ...

  5. webpack3_脚手架

    webpack    记得 --save-dev 装入开发依赖 更新迭代快,需要有根据报错解决问题的能力,来融会贯通这个工具 这里的是 webpack3,其实已经到了 webpack4 了 采用了 w ...

  6. HTML5_canvas_pen.translate()_

    .save() 和 .restore() 除了会保存之前的样式,还会保存之前的坐标轴 pen.translate(x, y); 将画布的 坐标轴原点(0, 0) 从画布的左上角,移动到 (x, y) ...

  7. 安装python--环境配置

    1.下载Python:https://www.python.org/ 2.下载setuptools: https://pypi.Python.org/pypi/setuptools 3.下载pip: ...

  8. Docker ElK安装部署使用教程

    一.简介 1.核心组成 ELK由Elasticsearch.Logstash和Kibana三部分组件组成: Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引 ...

  9. python中的包与模块

    '''模块与模块之间的调用''' import first #调用整个变量 print(first.Index) # #调用函数 print(first.hello()) # per = first. ...

  10. 基于STM32的USB枚举过程学习笔记(转)

    之前使用ST官方的库以及网络的资料,完成了使用USB HID类进行STM32和PC机的通讯.由于其他原因并没有深入的分析,虽然实现了功能,但是关于USB设备的枚举,以及具体的通讯方式都没有清晰的概念, ...