a-switch的几种简单应用

1.第一种情况,直接bind数据:

        

<a-switch v-model="isUsed" />

        使用当前值的使用,直接使用isUsed,值为boolean

2.第二中情况,在表单中使用:

<a-form-item label="是否开启">
              <a-switch v-decorator="['BACKSWITCH', { valuePropName: 'checked',rules: [{ required: true, message: '请填写是否开启' }] ,initialValue:false},]" />
 </a-form-item>

        注意:一定要加入valuePropName: 'checked',否则绑定数据会无效。

        在初始绑定使用开启时,可以如下:

this.form.setFieldsValue({
                    BACKSWITCH:true
                });

        使用它时,可以:

this.form.validateFields((err, values) => {
        if (!err) {
            let that = this;
            if(values.BACKSWITCH){
             ...
            }else{
              ...
            }
        ...
    }
...
})

3.在列表中操作列中使用时:

 <template slot="switch" slot-scope="{record}">
              <a-switch :checked="record.BACKSWITCH?true:false" @change="onChangeUse($event,record.id)" />
            </template>

        其中onChangeUse方法如下:

onChangeUse(e,id) {
      if(e){
        ...
      }else{
        ...
      }
    ...
}

        e的值即为当前选择的boolean值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值