鍍金池/ 問答/HTML/ vue 如何實現(xiàn)checkbox單選功能,不用radio的情形下

vue 如何實現(xiàn)checkbox單選功能,不用radio的情形下

 <el-row>
          <el-col :span="5">
            <el-checkbox v-model="form.discount" :true-label="1" :false-label="2" @change="resetDiscountValue">全單折扣</el-checkbox>
          </el-col>
          <el-col :span="17">
            <el-form-item prop="discountValue">
              <el-input v-model="form.discountValue" :disabled="form.discount === 2" placeholder="支持 1 - 100 的整數(shù)，輸入 80 即為打八折"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2" class="tail cw-tc">%</el-col>
        </el-row>
          <el-col :span="5">
            <el-checkbox v-model="form.discount2" :true-label="1" :false-label="2">方案折</el-checkbox>
          </el-col>
          <el-select v-model="form.grade" :disabled="form.discount2 === 2" size ="mini">
            <el-option value="" label="全部"></el-option>
            <el-option v-for="item in grades"
                       :key="item.code"
                       :label="item.name"
                       :value="item.code"
                       ></el-option>
          </el-select>

如何實現(xiàn)兩個checkbox互斥 只能單選

回答
編輯回答
涼汐

方法一:check綁定兩個互斥的值,將discount設(shè)置為false

方法二:先將所有checkbox設(shè)置為false,再將對應(yīng)的設(shè)置為true

    <el-checkbox v-model="form.discount[0]" :true-label="1" :false-label="2" @change="resetDiscountValue(0)">全單折扣1</el-checkbox>
    <el-checkbox v-model="form.discount[1]" :true-label="1" :false-label="2" @change="resetDiscountValue(1)">全單折扣2</el-checkbox>
              
resetDiscountValue(){
    this.form.discount.forEach((item,index)=>{
        this.$set(this.form.discount,index,false)
    })
    this.$set(this.form.discount,index,true)
}
2017年12月9日 23:52
編輯回答
傲寒
<el-checkbox v-model="form.discount" @change='form.discount2 = !form.discount'>備選項</el-checkbox>
<el-checkbox v-model="form.discount2" @change='form.discount = !form.discount2'>備選項2</el-checkbox>
2017年6月12日 20:31
編輯回答
眼雜
<el-checkbox-group v-model="form.checkState">
    <el-checkbox  false-label='null' true-label="true" name="state">啟用</el-checkbox>
    <el-checkbox  false-label='null' true-label="false" name="state">禁用</el-checkbox>
</el-checkbox-group>

data默認(rèn)

form: {                    
  checkState: null
}

null的情況是兩個都不選，true,false,對應(yīng)其中一個情況，用的element-ui組件

2018年7月28日 20:41