如何在SweetAlert删除弹窗内发起Axios请求并将返回数据渲染为下拉选项

以下是适配你需求的完整改造后代码，已将原有英文提示替换为中文，且新增了可转移beacon下拉选择逻辑：

deleteBeacon(beacon) {
      const self = this
      // 先拉取可转移的beacon列表
      axios.get(`/beacons?centerId=${this.form.center_id}&without=${this.$route.params.id}`)
        .then(res => {
          const transferBeaconList = res.data
          // 无可用转移目标时直接终止操作
          if (!transferBeaconList || transferBeaconList.length === 0) {
            swal("操作无法执行", "当前没有可转移关联内容的beacon，无法删除该设备", "error")
            return
          }
          // 生成下拉选择框DOM
          const selectDom = document.createElement('select')
          selectDom.style.width = '100%'
          selectDom.style.padding = '8px'
          selectDom.style.marginTop = '12px'
          // 渲染下拉选项
          transferBeaconList.forEach(item => {
            const option = document.createElement('option')
            option.value = item.id
            // 可根据业务调整展示字段，比如改为mac地址、设备编号等
            option.innerText = item.name 
            selectDom.appendChild(option)
          })
          // 弹出带下拉框的确认弹窗
          return swal({
            title: "确认删除该beacon？",
            text: "您要将该beacon关联的内容转移到何处？",
            icon: "warning",
            content: selectDom,
            buttons: ['取消', '确认删除'],
            dangerMode: true,
          })
        })
        .then((willDelete) => {
          if (!willDelete) {
            swal("已取消", "Beacon未被删除", "error")
            return
          }
          // 获取用户选中的转移目标ID
          const targetBeaconId = document.querySelector('.swal-content select').value
          // 执行删除请求，携带转移目标ID，可根据后端接口要求调整参数传递方式
          return axios.delete(`/beacons/${beacon.id}`, {
            data: { targetBeaconId }
          })
        })
        .then((response) => {
          swal("删除成功", response.data.message, "success");
          this.beacons.splice(this.editedIndex, 1);
          this.closeDelete();
        })
        .catch((err) => {
          if (!err.response) {
            swal("请求失败", "网络异常，请稍后重试", "error")
            return
          }
          if (err.response.status == 401) {
            self.$router.push("/login");
          } else if (err.response.status == 404) {
            swal(
              "错误",
              "Beacon不存在或已被最近删除",
              "error"
            );
          } else {
            swal("操作失败", err.response.data?.message || "未知错误，请稍后重试", "error")
          }
        });
    },

关键调整说明 #

• 执行顺序优化：触发删除操作后先拉取可选转移beacon列表，列表为空时直接提示用户无法执行删除
• 弹窗自定义：在原有确认弹窗基础上插入下拉选择框，你可根据业务需求修改选项的展示字段
• 请求适配：删除请求会携带用户选中的转移目标beacon ID，示例中放在请求体中传递，你可以根据后端接口规则调整为query参数形式
• 新增通用错误处理：覆盖网络异常、未知服务错误等场景的提示，避免操作无反馈

内容的提问来源于stack exchange，提问作者Valentina Bevore