el-dropdown 事件

怼烎@ 2022-08-30 11:50 201阅读 0赞

<el-dropdown    @command="getCreateOrder"  class="dropdwom">
                        <el-button icon="el-icon-plus" type="primary">
                            创建订单
                        </el-button>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item    :command="item.id" v-text="item.name" :key="item.id" v-for="item in createOrder">
                                <el-radio-group  v-model="createOrderName">
                                <el-radio v-model="createOrderName"  :label="item.name"> </el-radio>
                                </el-radio-group>
                            </el-dropdown-item>
                        </el-dropdown-menu>
     </el-dropdown> 
    
    
    
    data(){
    return{
      createOrder:[
                     {id:1,name:"模板0021031031" },{id:2,name:"模板0021031032" },{id:3,name:"模板0021031033"},{id:4,name:"模板0021031034"},{id:5,name:"模板0021031035"}
                 ],
                createOrderName:""
    }
    }
    
    methods:{
      // 创建订单
                getCreateOrder(val){
                     console.log(val)
                },
    }

或者您使用

@click.native="click()"

下列样式

![20210726172542815.png][]

<el-dropdown class="dropdwom">
                        <el-button plain  type="primary">
                            导入订单<i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item :key="index" v-for="(item,index) in createOrder">
                                <el-radio-group   @change="getImportOrder"  :vlalue="item.id" v-model="createOrderName">
                                <el-radio  :label="item.name"> </el-radio>
                                </el-radio-group>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                        </el-dropdown>

createOrder:[
                        {id:1,name:"模板0021031031" },{id:2,name:"模板0021031032" },{id:3,name:"模板0021031033"},{id:4,name:"模板0021031034"},{id:5,name:"模板0021031035"}
                    ],

// 导入项目
                getImportProject(val){
                     console.log("导入项目",val)
                }

[20210726172542815.png]: /images/20220829/439af6c5d11f4765823bdc3274e9c837.png