Element-ui學習筆記3--Form表單（一）

Radio單選框

要使用 Radio 組件，只需要設置v-model綁定變量，選中意味着變量的值為相應 Radio label屬性的值，label可以是String、Number或Boolean。

<template>

　　 <el-radio v-model="radio" label="1">備選項</el-radio>

　　 <el-radio v-model="radio" label="2">備選項</el-radio>

</template>

<script>

　　 export default { data () { return { radio: '1' }; } }

</script>

el-radio-group的使用，可以只在父級綁定一個v-model

子元素el-radio只需要設置label值

按鈕樣式的單選框

只需要把el-radio元素換成el-radio-button元素即可，此外，Element 還提供了size屬性，同button的默認，medium,small,mini

 

<el-radio v-model="radio1" label="1" border>備選項1</el-radio>

加上border屬性可以設置帶有邊框的單選框

 

Radio Attributes

參數	說明	類型	可選值	默認值
value / v-model	綁定值	string / number / boolean	—	—
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否顯示邊框	boolean	—	false
size	Radio 的尺寸，僅在 border 為真時有效	string	medium / small / mini	—
name	原生 name 屬性	string	—	—

 

 

 

 

 

 

 

 

Radio Events

事件名稱	說明	回調參數
change	綁定值變化時觸發的事件	選中的 Radio label 值

 

 

 

Radio-group Attributes

參數	說明	類型	可選值	默認值
value / v-model	綁定值	string / number / boolean	—	—
size	單選框組尺寸，僅對按鈕形式的 Radio 或帶有邊框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
text-color	按鈕形式的 Radio 激活時的文本顏色	string	—	#ffffff
fill	按鈕形式的 Radio 激活時的填充色和邊框色	string	—	#409EFF

 

 

 

 

 

 

 

Radio-group Events

事件名稱	說明	回調參數
change	綁定值變化時觸發的事件	選中的 Radio label 值

 

 

 

Radio-button Attributes

參數	說明	類型	可選值	默認值
label	Radio 的 value	string / number	—	—
disabled	是否禁用	boolean	—	false
name	原生 name 屬性	string	—	—

 

 

 

 

 

 

change事件默認執行函數的第一個返回值是選中的radio的label值，點擊同一個radio不會重復觸發

如果要觸發，需要手動添加點擊方法@click.native.prevent

 

Checkbox多選框

在el-checkbox元素中定義v-model綁定變量，單一的checkbox中，默認綁定變量的值會是Boolean，選中為true。

<template>

<!-- `checked` 為 true 或 false -->

　　 <el-checkbox v-model="checked">備選項</el-checkbox>

</template>

<script>

　　export default { data() { return { checked: true }; } };

</script>

checkbox-group元素能把多個 checkbox 管理為一組，只需要在 Group 中使用v-model綁定Array類型的變量即可。 

el-checkbox 的 label屬性是該 checkbox 對應的值，若該標簽中無內容，則該屬性也充當 checkbox 按鈕后的介紹。

label與數組中的元素值相對應，如果存在指定的值則為選中狀態，否則為不選中。

<template>

　　<el-checkbox-group v-model="checkList">

　　　　 <el-checkbox label="復選框 A"></el-checkbox>

　　　　 <el-checkbox label="復選框 B"></el-checkbox>

　　　　 <el-checkbox label="復選框 C"></el-checkbox>

　　　　 <el-checkbox label="禁用" disabled></el-checkbox>

　　　　<el-checkbox label="選中且禁用" disabled></el-checkbox>

　　</el-checkbox-group>

</template>

<script> export default { data () { return { checkList: ['選中且禁用','復選框 A'] }; } }; </script>

indeterminate 屬性用以表示 checkbox 的不確定狀態，一般用於實現全選的效果

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox>

 

indeterminate為false，checkAll為false的時候，狀態為未選中。
indeterminate為true，checkAll為false的時候，狀態為半選中。
indeterminate為false，checkAll為true的時候，狀態為全選中。

 

使用 min 和 max 屬性能夠限制可以被勾選的項目的數量。

<template>

　　<el-checkbox-group v-model="checkedCities" :min="1" :max="2">

　　　　 <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>

　　</el-checkbox-group>

</template>

<script>

const cityOptions = ['上海', '北京', '廣州', '深圳'];

export default { data() { return { checkedCities: ['上海', '北京'], cities: cityOptions }; } };

</script>

el-checkbox按鈕樣式

只需要把el-checkbox元素替換為el-checkbox-button元素即可。此外，Element 還提供了size屬性。

添加border，一樣可以生成有邊框的多選框

Checkbox Attributes

參數	說明	類型	可選值	默認值
value / v-model	綁定值	string / number / boolean	—	—
label	選中狀態的值（只有在checkbox-group或者綁定對象類型為array時有效）	string / number / boolean	—	—
true-label	選中時的值	string / number	—	—
false-label	沒有選中時的值	string / number	—	—
disabled	是否禁用	boolean	—	false
border	是否顯示邊框	boolean	—	false
size	Checkbox 的尺寸，僅在 border 為真時有效	string	medium / small / mini	—
name	原生 name 屬性	string	—	—
checked	當前是否勾選	boolean	—	false
indeterminate	設置 indeterminate 狀態，只負責樣式控制	boolean	—	false

 

 

 

 

 

 

 

 

 

 

Checkbox Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	更新后的值

 

 

 

Checkbox-group Attributes

參數	說明	類型	可選值	默認值
value / v-model	綁定值	array	—	—
size	多選框組尺寸，僅對按鈕形式的 Checkbox 或帶有邊框的 Checkbox 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
min	可被勾選的 checkbox 的最小數量	number	—	—
max	可被勾選的 checkbox 的最大數量	number	—	—
text-color	按鈕形式的 Checkbox 激活時的文本顏色	string	—	#ffffff
fill	按鈕形式的 Checkbox 激活時的填充色和邊框色	string	—	#409EFF

 

 

 

 

 

 

 

 

Checkbox-group Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發的事件	更新后的值

 

 

 

Checkbox-button Attributes

參數	說明	類型	可選值	默認值
label	選中狀態的值（只有在checkbox-group或者綁定對象類型為array時有效）	string / number / boolean	—	—
true-label	選中時的值	string / number	—	—
false-label	沒有選中時的值	string / number	—	—
disabled	是否禁用	boolean	—	false
name	原生 name 屬性	string	—	—
checked	當前是否勾選	boolean	—	false