JeechBoot前端表格内操作设置下拉

上面是最终的结果，这是在业务场景中很容易碰到的功能操作，下面就是该功能的代码展示。

//接口定义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-if="record.deviceType == 0"><a-space><a-dropdown trigger="click"@click="e => e.preventDefault()"><a-button type="text"size="small":loading="doorLoading[record.id]">远程开门<Icon icon="mdi:chevron-down"/></a-button><template #overlay><a-menu @click="({ key }) => handleDoorStateChange(record, key)"><a-menu-item key="0">关闭</a-menu-item><a-menu-item key="1">打开</a-menu-item><a-menu-item key="2">常开</a-menu-item><a-menu-item key="3">常关</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};constresult=awaitopenDoor1(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;}}