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>

最终的效果就是这样：