上面是最终的结果这是在业务场景中很容易碰到的功能操作下面就是该功能的代码展示。//接口定义exportconstopenDoor1(params:{id:string;dwState:string}){returndefHttp.post({url:Api.openDoor,params:params,// 参数作为query参数传递headers:{Content-Type:application/x-www-form-urlencoded}// 将参数放到请求头上},{isTransformResponse:false});}//在操作栏区域添加组件!--门禁远程开门设备名称为门禁时显示--template v-ifrecord.deviceType 0a-spacea-dropdown triggerclickclicke e.preventDefault()a-button typetextsizesmall:loadingdoorLoading[record.id]远程开门Icon iconmdi:chevron-down//a-buttontemplate #overlaya-menu click({ key }) handleDoorStateChange(record, key)a-menu-item key0关闭/a-menu-itema-menu-item key1打开/a-menu-itema-menu-item key2常开/a-menu-itema-menu-item key3常关/a-menu-item/a-menu/template/a-dropdown/a-space/template//逻辑书写// ------------------- 门禁远程开门逻辑 -------------------/** * 处理门禁开门状态选择 */asyncfunctionhandleDoorStateChange(record:any,dwState:string){if(doorLoading.value[record.id])return;try{doorLoading.value[record.id]true;constparams{id:record.id,dwState:dwState};constresultawaitopenDoor1(params);if(result.success){conststateMap{0:关闭,1:打开,2:常开,3:常关};createMessage.success(已设置为${stateMap[dwState]}状态指令已发送);reload();}else{createMessage.error(result.message||操作失败);}}catch(error){console.error(门禁开门失败:,error);createMessage.error(操作失败请重试);}finally{doorLoading.value[record.id]false;}}