How to implement multiple parameters in el-dropdown in ElementUI

How to implement multiple parameters in el-dropdown in ElementUI

Recently, due to the increase in buttons in the business, there are too many buttons in the page layout, the page is not beautiful enough, and the user experience is not good. So I thought of using el-dropdown to make a drop-down button (integrating multiple buttons together and implementing drop-down)

insert image description here

However, the handleCommand method in the ElementUi official documentation only allows one parameter to be passed in, which is used to trigger which option you selected. In practice, we also need to pass in an object with the current row number (if you use a table to display data like me), and then use some fields of this object to pass it to the background for some add, delete, modify and query operations.

The example of el-dropdown in the official document of ElementUi is as follows:
el-dropdown official documentation

<el-dropdown @command="handleCommand">
  <span class="el-dropdown-link">
    Drop-down menu<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item command="a">Golden Cake</el-dropdown-item>
    <el-dropdown-item command="b">Lion Head</el-dropdown-item>
    <el-dropdown-item command="c">Snail rice noodle</el-dropdown-item>
    <el-dropdown-item command="d" disabled>Double Skin Milk</el-dropdown-item>
    <el-dropdown-item command="e" divided>Oyster Omelet</el-dropdown-item>
  </el-dropdown-menu>
</el-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<script>
  export default {
    methods: {
      handleCommand(command) {
        this.$message('click on item ' + command);
      }
    }
  }
</script>

We must repackage the command parameter into an object before executing the handleCommand method so that it contains the data we want for later calls.

The code is as follows:

<el-table-column label="Operation 1">
    <template slot-scope="scope">
        <el-dropdown split-button type="primary" @command="handleCommand">
            Other operations <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">Abandoned</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">Upload original</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">Original arrangement</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index, scope.row,'d')">Freeze</el-dropdown-item>
                <el-dropdown-item disabled :command="beforeHandleCommand(scope.$index, scope.row,'e')">Unfreeze</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

Because we are writing it in a table, we need a slot and make specific modifications based on the actual situation. Bind a method to the command attribute of the tag, this method can pass in the parameters we want, and then use this method to encapsulate it into an object, and then pass this object into the handleCommand method.

<script>
export default {
    methods: {
        handleAbandon(index, row) {
           //todo
        },
        handleUpload (index, row) {
            //todo
        },
        handleSettle(index, row){
           //todo   
        },
        beforeHandleCommand(index, row, command){
            return {
                'index': index,
                'row': row,
                'command':command
            }
        },
        handleCommand(command) {
            switch (command.command) {
                case "a"://abandon this.handleAbandon(command.index,command.row);
                    break;
                case "b"://Upload the original this.handleUpload (command.index, command.row);
                    break;
                case "c"://Original arrangement this.handleSettle(command.index,command.row);
                    break;
            }
        }
    },
}
</script>

This is the end of this article about how to implement multiple parameters of el-dropdown in ElementUI. For more information about how to pass multiple parameters of el-dropdown in ElementUI, please search previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • vue+element builds a small summary of the background el-dropdown drop-down function

<<:  Implementation example of Docker deployment of front-end and back-end separation projects

>>:  Example of assigning values ​​to ActiveX control properties by param name in a web page

Recommend

Install mysql5.7.17 using RPM under Linux

The installation method of MySQL5.7 rpm under Lin...

Summary of CSS sibling element floating analysis

float:left/right/none; 1. Same level floating (1)...

When you enter a URL, what exactly happens in the background?

As a software developer, you must have a complete...

Detailed explanation of JavaScript onblur and onfocus events

In HTML pages, visual elements such as buttons an...

Three ways to copy MySQL tables (summary)

Copy table structure and its data The following s...

Uncommon but useful tags in Xhtml

Xhtml has many tags that are not commonly used but...

linux exa command (better file display experience than ls)

Install Follow the README to install The document...

MySQL sorting principles and case analysis

Preface Sorting is a basic function in databases,...

Steps to configure IIS10 under Win10 and support debugging ASP programs

Microsoft IIS IIS (Internet Information Server) i...

js memory leak scenarios, how to monitor and analyze them in detail

Table of contents Preface What situations can cau...

Summary of MySQL development standards and usage skills

1. Naming conventions 1. Database names, table na...

How to change the encoding to utf-8 in mysql version 5.7 under windows

Preface I just started learning MySQL and downloa...

A brief discussion on which fields in Mysql are suitable for indexing

Table of contents 1 The common rules for creating...