elementUI dropdown

最新推荐文章于 2024-07-04 08:43:07 发布

connie-256

最新推荐文章于 2024-07-04 08:43:07 发布

阅读量260

点赞数 3

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_42215627/article/details/137498005

版权

文章描述了如何在Vue应用中动态设置Dropdown菜单的command属性，通过beforeHandleCommand函数处理不同菜单项（如删除、编辑、共享、复制和取消发布）的功能调用。

摘要由CSDN通过智能技术生成

 // 动态设置Dropdown的command
    beforeHandleCommand(flag, command) {
      return {
        flag: flag,
        command: command
      }
    },
    //点击下拉菜单每一项时触发
    changeItem(val) {
      const formItem = val.command
      switch (val.flag) {
        case 'del':
          this.batchDelete('', formItem)
          break
        case 'edit':
          this.addOrEditCourse('edit', formItem)
          break
        case 'isShare': //共享
          this.shareBtn(formItem)
          break
        case 'copyCourse':
          this.copyCourse(formItem)
          break
        case 'reset':
          this.updateBaseCourse(formItem)
          break
        default:
          break
      }
    },

 <el-dropdown placement="top" @command="changeItem">
                    <el-button style="margin-left: 16px" type="text"
                      >更多<i class="el-icon-more" style="transform:rotate(90deg)"></i
                    ></el-button>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item :command="beforeHandleCommand('del', item)"
                        >删除
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="item.isCreator == 1"
                        :command="beforeHandleCommand('edit', item)"
                        >编辑
                      </el-dropdown-item>
                      <!--  item.share==0未共享  item.share==1已共享  逻辑更改-->
                      <el-dropdown-item :command="beforeHandleCommand('isShare', item)"
                        >共享
                      </el-dropdown-item>
                      <el-dropdown-item :command="beforeHandleCommand('copyCourse', item)"
                        >复制培训班
                      </el-dropdown-item>
                      <el-dropdown-item
                        v-if="item.isResearch == 0 && item.courseState == '1'"
                        :command="beforeHandleCommand('reset', item)"
                        >取消发布
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>