iview使用Radio实现单选

1、前端页面iview中代码model.isUsePlan为绑定数据 ,changeModel是点击单选按钮时触发事件

<RadioGroup v-model="model.isUsePlan" @on-change="changeModel">
     <Radio v-for="item in workOrderList" :label="item.value" :key="item.value"><span>{{item.label}}</span></Radio>
</RadioGroup>

export default {
    data() {
      return {
        workOrderList: [
          {
            label: '是',
            value: '1'
          }, {
            label: '否',
            value: '0'
          }
        ]
       }
    }
}

methods: {
  changeModel(newval) {
     if (newval === '0') {
        this.model.planType = ''
     }
  }
}

2、此时就可以,但有个问题,model.isUsePlan是数字,回显将会出问题,解决办法,在页面数据加载时将数字转换为字符串,此处edit.isUsePlan和上面的model.isUsePlan是同一数据,只是页面不同,根据自己实际加载数据位置进行更改就可以

// 预设工序回显
if (edit.isUsePlan || edit.isUsePlan === 0) {
    edit.isUsePlan = edit.isUsePlan.toString()
}

猜你喜欢

转载自blog.csdn.net/weixin_41996632/article/details/89360484
今日推荐