Element UI中的radio框切换年、月、日。

Element UI中的radio框切换年、月、日。

今天上班写了年、月、日、的切换并且带有提示框的发请求获取数据,纠结了很久才想到可以定义一个方法来动态获取当前点击的数据来进行发请求。接口是一样的,只是参数发请求传的参数不一样。

效果如下:

在这里大青蛙插入图片描述点击每一个按钮会提示是否需要更改当前所点击的时间,可以取消或者确定。

在这里插入图片描述取消和确定切换之后会进行提示。(因为此接口是内部接口外网访问不到,导致确定之后返回的是取消切换

代码如下

<template>
  <div>
      <el-radio-group v-model="radio" @change="handelfox">
        <el-radio label="每年"></el-radio>
        <el-radio label="每半年"></el-radio>
        <el-radio label="每月"></el-radio>
        <el-radio label="每日"></el-radio>
      </el-radio-group>
  </div>
</template>
<script>
export default {
    data(){
        return {
          radio:"",

        }
    },
      methods: {
        handelfox(val){
          let that = this
            that.$confirm('是否切换为'+val +'这个时间?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then((action,  done )=>{
              if(action === 'confirm'){
                  let temp = null
                  temp = that.radio === "每年"?
                  "每年":that.radio === "每半年"?
                  "每半年":that.radio === "每月"?
                  "每月":that.radio ==="每日"?
                  "每日":""
                  that.submil(temp)
                  done
              }
            }).catch(()=>{
              this.$message({
                  type: 'info',
                  message: '已取消切换'
              });
            })

        },
        submil(temp){
          let url = "/scheduledTask/updata"
          if(!temp)return false
          this.$axios.post(url,{
            backupTime:temp
          }).then((res)=>{
            data = res.data
            if(data.code === 20000){
              this.$message({
                  type: 'success',
                  message: '切换'+data.message
              });
            }
          })

        }

    }
}
</script>

最近刚开始写博客,如果本文章有错误的地方还需要多多指导。最后祝大家的代码永无Bug。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: el-radio 无法切换可能是因为以下原因导致的: 1. v-model 绑定的数据可能不是唯一的,而是一个数组。 2. v-model 绑定的数据可能不存在。 3. 绑定的值可能不是 el-radio 的 label 值。 4. 可能存在其他与 el-radio 冲突的组件或代码。 5. 没有监听事件 建议检查上述原因,并确保数据和事件正确绑定。如果仍然无法解决问题,建议提供相关代码以便进一步调试。 ### 回答2: 出现 element 单选框无法切换的问题可能有以下几种原因: 1. 检查是否正确设置了 value 值。单选框的切换是基于 value 值来实现的,如果没有正确设置 value 值,就无法切换选项。可以通过查看代码来确认是否正确设置了 value。 2. 检查是否正确绑定了 v-model。v-model 是用来实现数据双向绑定的指令,如果没有正确绑定 v-model,就无法实现选项的切换。可以通过查看代码来确认是否正确绑定了 v-model。 3. 检查是否使用了正确的事件监听。element 单选框的切换通常是通过监听 change 事件来实现的,如果没有正确使用 change 事件监听器,就无法切换选项。可以通过查看代码来确认是否正确使用了 change 事件监听器。 4. 检查是否存在其他代码或插件的冲突。有时候其他代码或插件可能会干扰到 element 单选框的正常功能,可以尝试将其他代码或插件禁用掉,再测试是否能够正常切换选项。 综上所述,如果 element 单选框无法切换,可以从以上几个方面进行排查,找出问题所在并进行修复。如果问题无法解决,可以查阅 element 官方文档或在相关社区寻求帮助。 ### 回答3: el-radio无法切换的问题通常是由以下几种情况引起的。首先,你需要确认你的element组件是否正确地导入了el-radio。其次,检查你的代码是否正确使用了el-radio组件,包括正确设置了v-model绑定的值、设置了不同的值作为选项的唯一标识和显示的文字等。然后,你可以检查一下是否存在其他的点击事件或方法影响了el-radio切换,可能会引发冲突。另外,你还可以检查一下是否存在样式或脚本的冲突问题,可以尝试将el-radio放在一个干净的环境测试。最后,如果以上方法都无法解决问题,可以考虑升级或尝试其他版本的element-ui,以及在element-ui的Github仓库搜索是否有相关的issue和解决方案。希望以上内容对你有所帮助,祝你解决问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值