解決Element-ui radio單選框label佈爾/數值的一個坑

Posted on by

Element-ui radio單選框label佈爾/數值的坑

element-ui單選框

大傢是不是都是這樣寫的，後端需要的數據是佈爾類型true、false，這樣寫就導致保存及編輯顯示的時候還得處理一次，有點小麻煩

<el-radio-group v-model="radio">
      <el-radio-button label="是"></el-radio-button>
       <el-radio-button label="否"></el-radio-button>
</el-radio-group>

element-ui單選框可以綁定string/number/boolean類型的數據

正確操作方法

如果需要綁定數值或者佈爾類型的值，需要在label前加上:，像這樣：

<el-radio-group v-model="radio">
      <el-radio :label="true">是</el-radio>
    <el-radio :label="false">否</el-radio>
</el-radio-group>

Element el-radio單選框詳解

1. 用途

單選框使用的場景非常普遍，用於列出多個選項，供用戶選擇其中一個。

註意Select選擇器也可以從多個選項中選擇一個，單選框的優勢是可以在界面上同時顯示所有選項，缺點是選項多時占用空間大。

而選擇器優勢是占用空間小(選項下拉選擇時才顯示)，缺點是必須要下拉時才能顯示所有選項。

2. 單選框

單選框HTML代碼如下：

	<el-radio v-model="radio1" label="male">男</el-radio>
    <el-radio v-model="radio1" label="female">女</el-radio>
    選中:{{radio1}}
    <el-divider></el-divider>

需要註意，漢字部分表示顯示內容，label表示選中的值，v-model表示綁定的JS變量。JS部分代碼：

radio1: 'male',

效果如下：

3. 單選框樣式

單選框添加按鈕邊框樣式，通過border屬性實現。

HTML代碼：

	<el-radio v-model="radio2" label="basketball" border>籃球</el-radio>
    <el-radio v-model="radio2" label="football" border>足球</el-radio>
    選中:{{radio2}}
    <el-divider></el-divider>

JS代碼：

radio2: 'basketball',

效果如下：

4. 單選框組

可以使用el-radio-group標簽將單選框包圍起來，這樣隻需要設置一個v-model綁定變量即可。這樣的方式會將同一組的選項放在一個標簽內，使用起來更加符合習慣。示例：

HTML代碼：

    <el-radio-group v-model="radio3">
      <el-radio label="male">男</el-radio>
      <el-radio label="female">女</el-radio>
    </el-radio-group>
    選中:{{radio3}}
    <el-divider></el-divider>

JS代碼：

radio3: 'male',

效果：

4. 單選框組樣式

Element為單選框組也提供瞭按鈕樣式，看起來更加富有科技感。

HTML代碼：

	<el-radio-group v-model="radio4">
      <el-radio-button label="chinese">語文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>
    <el-divider></el-divider>

JS代碼：

radio4: 'chinese',

效果：

5. 尺寸調節

針對按鈕樣式的單選框和單選框組，可以使用size調整其大小，例如：

    <el-radio-group v-model="radio4" size="medium">
      <el-radio-button label="chinese">語文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="small">
      <el-radio-button label="chinese">語文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>
    <el-radio-group v-model="radio4" size="mini">
      <el-radio-button label="chinese">語文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>
    <el-divider></el-divider>

效果如下：

6. 綁定值變化事件

當綁定值發生變化時，可以通過@change指定觸發的事件方法。例如：

HTML代碼：

   	<el-radio @change="sexChange" v-model="radio1" label="male">男</el-radio>
    <el-radio @change="sexChange" v-model="radio1" label="female">女</el-radio>
    <el-divider></el-divider>
    <el-radio-group v-model="radio4" @change="courseChange">
      <el-radio-button label="chinese">語文</el-radio-button>
      <el-radio-button label="math">數學</el-radio-button>
      <el-radio-button label="english">英語</el-radio-button>
    </el-radio-group>

JS代碼：

export default {
  data() {
    return {
      radio1: 'male',
      radio2: 'basketball',
      radio3: 'male',
      radio4: 'chinese',
    };
  },
  methods: {
    sexChange() {
      console.log("sexChange");
    },
    courseChange() {
      console.log("courseChange");
    }
  }
}

當選中項變化時，就會觸發對應的methods中定義的方法。

註意：

el-radio提供瞭比較多的單選按鈕實現方式，建議還是使用單選框組，代碼結構更加清晰容易管理。

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：