vue使用iview实现单选,禁选,下拉框的效果

2,936 阅读1分钟
<div class="content">
    <p>
      <span>控制</span>
      <RadioGroup v-model="animal" @on-change="KongFun">
        <Radio label="启用"></Radio>
        <Radio label="禁用"></Radio>
      </RadioGroup>
    </p>
    <p>
      <span>IP地址</span>
      <RadioGroup v-model="animalIP" @on-change="IPFun">
        <Radio label="静态IP" :disabled="disabledF"></Radio>
        <Radio label="自动分配" :disabled="disabledF"></Radio>
      </RadioGroup>
    </p>
    <p>
      <span>IP</span>
      <Input v-model="value1"  placeholder="请填写IP" :disabled="disabled"/>
    </p>
    <p>
      <span>mask</span>
      <Input v-model="value2"  placeholder="请填写mask" :disabled="disabled"/>
    </p>
    <p>
      <span>Gw</span>
      <Input v-model="value3"  placeholder="请填写Gw" :disabled="disabled"/>
    </p>
    <p>
      <span>模式选择</span>
      <Select style="width:100px" @on-change="selectFun" v-model="valueOption">
        <Option v-for="item in userList" :value="item.userName"  :key="item.userId" >{{item.userName}}</Option>
      </Select>
    </p>
  </div>  
  data(){
      return{
        animal:'启用',
        animalIP:'静态IP',
        value1:'',
        value2:'',
        value3:'',
        disabled:false,//禁止input框
        disabledF:false,//禁止单选框
        valueOption:'asp',//下拉列表默认显示
        userList:[//下拉列表的数据
          {
            userId:'1',
            userName:'asp',
          },
          {
            userId:'2',
            userName:'sta',
          }
        ]
      }
  },
  methods:{
  //点击控制时
      KongFun(){
        console.log(this.animal)
        if(this.animal=='禁用'){
            this.disabled=true
            this.disabledF=true
        }else{
           this.disabled=false
           this.disabledF=false
        }
      },
    //点击ip时
    IPFun(){
      if(this.animalIP=='自动分配'){
        this.disabled=true
        this.disabledF=false
      }else{
        this.disabled=false
        this.disabledF=false
      }
    },
    //点击下拉列表的时候
    selectFun(){
        console.log(this.valueOption)
    }
  }