Checkbox 多選框
一組備選項中進行多選
¶基礎用法
單獨使用可以表示兩種狀態之間的切換,寫在標簽中的內容為 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>
禁用狀態
多選框不可用狀態。
設置disabled屬性即可。 <template> <el-checkbox v-model="checked1" disabled>備選項1</el-checkbox> <el-checkbox v-model="checked2" disabled>備選項</el-checkbox> </template> <script> export default { data() { return { checked1: false, checked2: 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 狀態
indeterminate
屬性用以表示 checkbox 的不確定狀態,一般用於實現全選的效果
<template> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全選</el-checkbox> <div style="margin: 15px 0;"></div> <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"> <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 { checkAll: false, checkedCities: ['上海', '北京'], cities: cityOptions, isIndeterminate: true }; }, methods: { handleCheckAllChange(val) { this.checkedCities = val ? cityOptions : []; this.isIndeterminate = false; }, handleCheckedCitiesChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.cities.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length; } } }; </script>
可選項目數量的限制
使用 min
和 max
屬性能夠限制可以被勾選的項目的數量。
<template> <el-checkbox-group v-model="checkedCities1" :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 { checkedCities1: ['上海', '北京'], cities: cityOptions }; } }; </script>
按鈕樣式
按鈕樣式的多選組合。
只需要把el-checkbox元素替換為el-checkbox-button元素即可。此外,Element 還提供了size屬性。 <template> <div> <el-checkbox-group v-model="checkboxGroup1"> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup2" size="medium"> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup3" size="small"> <el-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup4" size="mini" disabled> <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button> </el-checkbox-group> </div> </template> <script> const cityOptions = ['上海', '北京', '廣州', '深圳']; export default { data () { return { checkboxGroup1: ['上海'], checkboxGroup2: ['上海'], checkboxGroup3: ['上海'], checkboxGroup4: ['上海'], cities: cityOptions }; } } </script>
帶有邊框
設置border屬性可以渲染為帶有邊框的多選框。 <template> <div> <el-checkbox v-model="checked3" label="備選項1" border></el-checkbox> <el-checkbox v-model="checked4" label="備選項2" border></el-checkbox> </div> <div style="margin-top: 20px"> <el-checkbox v-model="checked5" label="備選項1" border size="medium"></el-checkbox> <el-checkbox v-model="checked6" label="備選項2" border size="medium"></el-checkbox> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup5" size="small"> <el-checkbox label="備選項1" border></el-checkbox> <el-checkbox label="備選項2" border disabled></el-checkbox> </el-checkbox-group> </div> <div style="margin-top: 20px"> <el-checkbox-group v-model="checkboxGroup6" size="mini" disabled> <el-checkbox label="備選項1" border></el-checkbox> <el-checkbox label="備選項2" border></el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data () { return { checked3: true, checked4: false, checked5: false, checked6: true, checkboxGroup5: [], checkboxGroup6: [] }; } } </script>
Checkbox Attributes
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
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
參數 | 說明 | 類型 | 可選值 | 默認值 |
---|---|---|---|---|
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 |