エル・ドロップダウンElementUi入ってくるマルチパラメータにする方法

　　ボタンのニーズとビジネスニーズを製品後の増加は、（1つのレンダリングのアクションバー）、これはあまりにも長いレイアウトやボタンの問題、貧弱なユーザー体験をもたらすであろうことをここでするので、これを行うにはエル・ドロップダウンを使用して考えますダウンボタン（図1小節の1つの作用効果）。

図1のボタン効果の2種類

　　handleCommand方法ElementUi公式文書が唯一のパラメータにアクセスすることができます。しかし、このパラメータは使用すると、1つのオプションを選択したトリガに使用されています。そして、我々は実際にも（あれば私のように、また、データテーブルを表示し、あれば）あなたには、いくつかのCRUD操作をバック渡すために特定のフィールドを使用するオブジェクトの後ろにオブジェクトを現在の行番号を渡す必要があります。

エル・ドロップダウンの図2 ElementUi公式文書の例

　　だから、私たちは、handleCommandメソッドの前にオブジェクトとして再パッケージ化され、このコマンドパラメータを実行する必要があり、背面に簡単にそれを作ることは、我々が呼び出したいの内部データが含まれています。

コードをリリース：

<el-table-column label="操作1">
    <template slot-scope="scope">
        <el-dropdown split-button type="primary" @command="handleCommand">
            其他操作
            <el-dropdown-menu slot="dropdown" >
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'a')">编辑</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'b')">删除</el-dropdown-item>
                <el-dropdown-item :command="beforeHandleCommand(scope.$index, scope.row,'c')">分配角色</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </template>
</el-table-column>

因为我们是写在表格里的，所以需要一个插槽，具体的根据实际情况进行修改。给<el-dropdown-item>标签的command属性绑定一个方法，这个方法就可以传入我们想要的参数，然后利用这个方法封装成一个对象，再将这个对象传入handleCommand方法。

<script>
export default {
    methods: {
        handleEdit(index, row) {
           //todo
        },

        deleteUser(index, row) {
            //todo
        },

        assignRole(index, row){
           //todo   
        },

        beforeHandleCommand(index, row,command){
            return {
                'index': index,
                'row': row,
                'command':command
            }
        },
        handleCommand(command) {
            switch (command.command) {
                case "a"://编辑
                    this.handleEdit(command.index,command.row);
                    break;
                case "b"://删除
                    this.deleteUser(command.index,command.row);
                    break;
                case "c"://分配角色
                    this.assignRole(command.index,command.row);
                    break;
            }
        }
    },
}
</script>

　　至于匹配command选了哪个，用switch语句效率就会比较高了。

エル・ドロップダウンElementUi入ってくるマルチパラメータにする方法

おすすめ