what？iView的DropDown没有element的split-button？提issure？等不及了，自己实现一个

 

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

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

 

是不是感觉奇丑无比啊，于是改成了这样：

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

 

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

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

　　先说说我的做法，我的做法是这样的：

　　我的想法是常用高频的操作双击行弹窗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放到表格的每一行的右侧即可。

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