vue中el-dropdown组件实现下拉选择

最近项目中有一个需求，下载按钮太多了，需要合并到下拉框中去选择。下面先看效果

上代码：

• template部分

<div class="table-filter__list-item table-filter__list-item--export">
  <el-dropdown size="small" placement="bottom" trigger="click" @command="downloadSelect">
    <el-button size="small" type="primary">
      任务导出选择
      <i class="el-icon-arrow-down el-icon--right" />
    </el-button>
    <el-dropdown-menu>
      <el-dropdown-item command="item1">卡详情</el-dropdown-item>
      <el-dropdown-item command="item2">卡历史用量</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</div>

• methods部分 具体实现看需求。如果两个下载只有个别参数不一致，可以跳过downloadSelect方法，直接在taskExport参数列表里加参数即可。

methods: {
    downloadSelect(command) {
      switch (command) {
        case 'item1':
          this.taskExport1()
          break
        case 'item2':
          this.taskExport2()
          break
      }
    },
    async taskExport1() {
    console.log('下载实现1')
    //具体下载实现
    },
    async taskExport2() {
    console.log('下载实现2')
    //具体下载实现
    }
}

vue框架的界面样式确实很好看，都不用自己怎么写。

总结：el-dropdown，el-dropdown-menu和el-dropdown-item配套使用。el-dropdown里面嵌套一层el-dropdown-menu，而el-dropdown-menu嵌套多个el-dropdown-item使用。具体属性候补中。