vue使用iview實現單選,禁選,下拉框的效果

小丑八怪發表於2019-05-08
<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)
    }
  }複製程式碼

相關文章