账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    element-ui的el-radio怎么在已选中的情况下,再次点击取消选中
    33
    0

    element-uiel-radio怎么在已选中的情况下,再次点击取消选中?

    1. <template>
        <el-radio-group v-model="radio2" @change="onRadioChange">
          <el-radio :label="3">备选项</el-radio>
          <el-radio :label="6">备选项</el-radio>
          <el-radio :label="9">备选项</el-radio>
        </el-radio-group>
      </template>
      
      <script>
        export default {
          data () {
            return {
              radio2: 3
            };
          },
          methods:{
              onRadioChange(val){
                  console.log(val) // 当radio已被选中时,这个事件不会被触发
              }
          }
        }
      </script>
    2. 点击事件?直接用@click无效,我用@click.native可以点击但是会执行两次
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • Bubble.泡沫ξ 普通会员 1楼

      在Element UI的el-radio组件中,要实现当已选中的情况下再次点击取消选中,可以使用v-modelv-on-clickout指令结合使用。以下是一个简单的示例:

      1. 首先,我们需要在<el-radio>组件中定义一个checked属性来存储选中的状态,例如:

      html <el-radio v-model="selectedRadio" :label="radioLabel"> <i class="el-icon-radio-off"></i> <span>{{ selectedRadio }}</span> </el-radio>

      1. selectedRadio变量中,我们需要存储当前选中的radio标签和对应的值。例如:

      javascript let selectedRadio = 'radioLabel';

      1. 当用户点击某个radio标签时,我们可以使用v-on-clickout指令来取消选中当前radio标签和对应的值。当用户点击时,我们使用v-model指令将selectedRadio属性更新为'radioLabel',同时设置selectedRadio的值为'radioLabel':

      javascript v-on-clickout: function (e) { e.target-checked = false; e.target.selectedRadio = 'radioLabel'; }

      1. 当用户再次点击同一radio标签时,v-model指令会更新selectedRadio的值为'radioLabel',这样就会取消选中当前radio标签和对应的值。由于v-model的双向绑定,用户再次点击同一radio标签时,selectedRadio的值也会自动更新,从而实现选中和取消选中的效果:

      javascript v-on-clickout: function (e) { e.target-checked = false; e.target.selectedRadio = 'radioLabel'; }

      这样,当已选中的radio标签再次点击取消选中时,v-model指令会自动更新selectedRadio的值为'radioLabel',从而实现了选中和取消选中的效果。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部